Отключить переходы CSS-перехода Bootstrap на индикаторы выполнения

Кто-нибудь знает, как отключить переходы Bootstrap CSS3 на индикаторы выполнения? Я обновляю их с помощью javascript/jquery и не хочу, чтобы они делали анимацию.

Это выглядело многообещающим, но не могло заставить его работать: Отключить анимацию CSS3 С помощью jQuery?

Информация о шагах выполнения: http://twitter.github.com/bootstrap/components.html#progress

Ответы

Ответ 1

Вы можете отключить эффекты перехода, установив правило css transition на none, например:

.progress .bar {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

Ответ 2

Поскольку анимация поступает из класса active, вы можете просто использовать

$('.progress').removeClass('active');

или

$('.progress').toggleClass('active');

Ответ 3

Я решил проблему с javascript

      $('#proc').hide();
      $("#proc").width(0 + "%");
      $('#proc').show();

Для меня это работает отлично. Не мигает и просто выполняет свою работу. Вы также можете сделать это с чистой css, я думаю.

Ответ 4

Вы также можете сделать это с помощью $(".progress-bar").stop() анимации, а затем снова запустить ее.

Я хотел вернуть планку к 0 и начать снова, чтобы перейти к 100%. Итак, как это происходит:

$(".progress-bar").stop();      //Stopping the current animation at the current width
$(".progress-bar").animate({width: "0%"}, 100);       //Going back to 0% smoothly in 100ms
$(".progress-bar").animate({width: "100%"}, 1000);    //Restarting the process bar to 100%

Я надеюсь, что это поможет некоторым.