用 jQuery 关闭 CSS3 动画？

Posted 2023-03-06

【中文标题】用 jQuery 关闭 CSS3 动画？

【英文标题】：Turn Off CSS3 Animation With jQuery?

【发布时间】：2012-03-10 08:51:52

【问题描述】：

我有一个在页面加载时有动画的对象：

.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 删除该类时，无论如何，对象都会继续旋转。有什么我可以在这里做的吗？

【问题讨论】：

不要忘记未来的证明！ IE10 和 opera 正在实现 CSS 动画，因此您还可以指定 -ms 和 -o 前缀，这样每个人都可以在获得最新版本的浏览器后看到您的网站有多棒！

【参考方案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");

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

【讨论】：

你不需要使用前缀，jQuery会为你添加它;)

你读懂了我的烦恼……并立即解决它们！

【参考方案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：

http://jsfiddle.net/hNuSd/

所以我将您的示例（仅保留 -moz- 的示例，因为它是 Firefox）修改为 1 秒周期，我开始旋转，然后在 3.6 秒后结束。一切正常，Xubuntu 11.10 上的 Firefox 11.0。

如果您不使用 Firefox，您可以尝试在 Firefox 中确认它们（您和我的示例）在您的计算机上工作吗？它可能是特定于浏览器的“功能”。