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

Question

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

.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-loading, и в определенные моменты времени 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 удаляет класс, объект просто продолжает вращаться, несмотря ни на что. Я могу здесь что-нибудь сделать?

Answer 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");
}

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

Answer 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/

И этот пост в первую очередь от автора скрипки: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

Answer 3

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

• http://jsfiddle.net/hNuSd/

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

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