将 CSS3 过渡和动画与 jQuery addClass/removeClass 结合使用的最佳方式是什么？

Question

SO上有很多关于如何解决jQuery addClass() + removeClass() 和CSS3 animations/transitions 相关的具体问题。

一般来说，我关心的是执行以下操作的最佳方法：

旧版浏览器的优雅降级（不会触发 animationend 事件）
检测转换是否已经运行
停止或重新启动运行转换
在转换过程中更改参数

具体来说，我有一些正在制作的动画类，可以在 requisite jsFiddle example.

中查看

在 fiddle 中，我使用 opacity 和 max-height 定义了提供 "appear" 和 "disappear" 动画的类。当 fiddle 启动时，您可以看到这两个运行。

然后，我想在触发某些事件时制作元素 appear/disappear。我在另一个 post 的建议下尝试使用 addClass() & removeClass()（甚至 jQuery UI 的 switchClass()）所以。正如您在 fiddle 中看到的（通过单击 "click to animate" 和 "click to reset"），这些行为并不像人们预期的那样。

处理这个棘手问题的最佳方法是什么？

P.S。我知道 Web Animations API，但它现在只是一个草稿。 jQuery 和 jQuery UI 有 animate()，但如果可能我宁愿使用标准 CSS。

Answer 1

将代码更改为

$("#toggle").click(function(){
    var $one = $('#one');
    var $two = $('#two');
    var $three = $('#three');

    $one.removeClass('appear-lg');
    $one[0].offsetWidth = $one[0].offsetWidth;
    $one.addClass("disappear-lg");

    $two.removeClass('disappear-lg');
    $two[0].offsetWidth = $two[0].offsetWidth;
    $two.addClass("appear-lg");

    $three.removeClass('appear-lg');
    $three[0].offsetWidth = $three[0].offsetWidth;
    $three.addClass("disappear-lg");
});

请注意 offsetWidth 在更改类之间的变化。这有效地起到了刷新动画的效果。

http://jsfiddle.net/v6jcq6w8/1/

将 CSS3 过渡和动画与 jQuery addClass/removeClass 结合使用的最佳方式是什么？

What's the best way to use CSS3 Transitions & Animations with jQuery addClass/removeClass?

css

jquery

jquery-ui

css-transitions

css-animations