将CSS3 Transitions & Animations与jQuery addClass/removeClass一起使用的最佳方法是什么？

Question

关于如何解决与jQuery addClass() + removeClass()和CSS3动画/过渡相关的具体问题，SO上有很多问题。

一般来说，我关心的是做以下事情的最佳方法:

1. 旧浏览器的优雅降级(不触发例如animationend事件)
2. 检测转换是否已经在运行
3. 停止或重新启动运行转换
4. 转换过程中改变参数

具体来说，我有一些我正在使用的动画类，可以在必要的jsFiddle示例中检查。

在本文中，我使用opacity和max-height定义了提供"出现"one_answers"消失"动画的类。当小提琴启动时，你可以看到两个都在运行。

然后，我想让元素在触发某些事件时出现/消失。我正在尝试使用addClass() &removeClass()(甚至jQuery UI的switchClass())在这里的另一篇文章的建议。正如你所看到的那样(通过点击"点击动画"one_answers"点击重置")，它们的行为并不像人们想象的那样。

处理这个棘手问题的最好方法是什么?

注:我知道Web动画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/