javascript - 使用 jQuery 关闭 CSS3 动画？

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

你可以用“none”覆盖每个动画的 CSS 属性

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

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