Question

关于如何解决与jQuery removeClass() + animationend和CSS3动画/过渡相关的特定问题，有很多问题。

一般来说，我担心执行以下操作的最佳方式：

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

具体来说，我有一些我正在使用的动画类，可以在requisite jsFiddle example中进行检查。

在小提琴中，我使用max-height和addClass()定义了提供“显示”和“消失”动画的类。当小提琴启动时，你可以看到两个都在运行。

然后，我希望在触发某些事件时使元素显示/消失。我正在尝试使用removeClass()＆amp; animate()（甚至是jQuery UI的switchClass()）在SO的另一篇文章的建议中。正如你可以在小提琴中看到的那样（通过点击“点击动画”和“点击重置”），这些行为并不像人们期望的那样。

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

P.S。我知道Web Animations API，但现在只是一个草稿。 jQuery和jQuery UI有{{1}}，但如果可能，我宁愿使用标准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 Transitions＆amp;的最佳方法是什么？使用jQuery addClass / removeClass的动画？

1 个答案: