Отключить анимацию CSS3 С помощью jQuery?

У меня есть объект, который имеет анимацию при загрузке страницы:

.logo-mark {
        -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
            animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
    }

В определенное время я хочу, чтобы JavaScript включал определенную анимацию, которая происходит бесконечно, пока JavaScript не остановит анимацию. Поэтому я просто создал другой класс с именем .logo-load, а в определенные моменты jQuery делает addClass и removeClass.

.logo-loading {
            -webkit-animation: spin 4s infinite linear;
                -moz-animation: spin 4s infinite linear;
                -ms-animation: spin 4s infinite linear;
                animation: spin 4s infinite linear;
        }

Однако, когда JavaScript удаляет класс, объект просто продолжает вращаться, несмотря ни на что. Могу ли я здесь что-нибудь сделать?

Ответы

Ответ 1

Вы можете просто переопределить эти свойства CSS с помощью "none" для каждой анимации

function stopAnimation(element)
{
    $(element).css("-webkit-animation", "none");
    $(element).css("-moz-animation", "none");
    $(element).css("-ms-animation", "none");
    $(element).css("animation", "none");
}

чтобы вы могли остановить анимацию, просто вызвав эту функцию...

Ответ 2

Если вы хотите приостановить анимацию (а затем возобновить ее с момента ее приостановки), вы можете переключить ее состояние воспроизведения с помощью этого свойства CSS:

.paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}

Затем вы можете использовать jquery для переключения приостановленного класса:

$("#animatedElement").click(function(e){ 
  $(e.currentTarget).toggleClass("paused"); 
});

Смотрите этот пример, который фактически останавливается без javascript: http://jsfiddle.net/fRzwS/

И этот пост на forrst со скрипки автор: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

Ответ 3

Это работает так, как вы ожидаете в Firefox, см. этот jsFiddle:

Итак, я изменил ваш пример (только сохранил -moz- как Firefox) до 1 сек., я начинаю вращение, а затем завершаю его после 3.6. Все отлично работает, Firefox 11.0 на Xubuntu 11.10.

Если вы не используете Firefox, можете ли вы попробовать в Firefox подтвердить, что они (как ваши, так и мои примеры) работают там на вашей машине? Это может быть специфическая для браузера функция.