关闭CSS3动画使用jQuery？ [英] Turn Off CSS3 Animation With jQuery?

问题描述

我有了当页面加载动画的对象：

I have an object that has an animation when the page is loaded:

.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加载另一个类，并在某些时候，jQuery不会的addClass与removeClass移除。

At a certain time, I want JavaScript to turn on a specific animation that occurs endlessly, until JavaScript stops said animation. So I simply made another class named .logo-loading, and at certain times, jQuery does an addClass and a 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的删除类，对象只是不断旋转不管。有什么我可以在这里做什么？

However, when JavaScript removes the class, the object just keeps rotating no matter what. Is there anything I can do here?

推荐答案

您可以只覆盖使用无的CSS属性的每一个动画

You can just override that CSS properties with "none" to every animation

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

所以你可以停止动画简单地调用这个函数...

so you can stop animation simply calling this function...

这篇关于关闭CSS3动画使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！