什么'；使用CSS3转换的最佳方式&；使用jQuery addClass/removeClass的动画？

关于如何解决与jQuery

addClass（）

+

removeClass（）

和CSS3动画/转换相关的特定问题，有很多问题

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

较旧浏览器的优雅降级（不触发，例如

animationend

events）

检测转换是否已在运行

停止或重新启动正在运行的转换

在过渡期间更改参数

具体来说，我有一些动画课程，可以在中查看

在fiddle中，我使用

不透明度

和

最大高度

定义了提供“出现”和“消失”动画的类。当小提琴开始演奏时，你可以看到这两种乐器都在演奏

然后，我希望在触发某些事件时使元素出现/消失。我试图使用

addClass（）

&

removeClass（）

（甚至是jqueryui的），这是根据另一篇文章的建议。正如您在小提琴中所看到的（通过单击“单击以设置动画”和“单击以重置”），它们的行为可能与预期不同

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

顺便说一下，我知道，但现在只是草稿。jQuery和jQueryUI有

animate（）

，但如果可能的话，我宁愿使用标准CSS。

将代码更改为

$("#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

更改。这有效地具有刷新动画的效果

---

你听说过吗？1.2.或3.或4.绿袜子是石头！来自ActionScript世界，它解决了很多动画问题。我正在与AngularJS一起使用GSAP，解决了您在这里提到的许多问题。感谢您推荐GSAP。我确实听说过。这并没有回答我关于这个具体案例的问题，也没有利用CSS3动画/转换。也就是说，将来我会考虑使用GSAP。IIRC这有强迫浏览器重新绘制的效果…但这似乎不是问题的“正确”解决方案。谢谢你提到这一点。不幸的是，这似乎是目前最好的解决方案！我还按照建议探索了克隆和替换元素……长话短说，我遇到了

clone（）

破坏事件绑定的问题，因此回到了良好的ol'

offsetWidth

。叹息