对于JavaScript或jQuery，如何使Transitionend事件不触发? [英] For JavaScript or jQuery, how to make transitionend event not fire?

问题描述

在链接中:

https://developer.mozilla.org/zh- US/docs/Web/Guide/CSS/Using_CSS_transitions

据说:

注意:如果中止过渡，则过渡结束事件不会触发，因为在过渡完成之前更改了动画属性的值.

Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.

所以我继续在 http://jsfiddle.net/HA8s2/32/和 http://jsfiddle.net/HA8s2/33/使用Chrome和Firefox.

So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox.

示例:(单击jsfiddle中的左侧或右侧框)

example: (click on either the left or right box in jsfiddle)

$(".foo").click(function(evt) { 
    $(".foo").addClass("hide");
    setTimeout(function() {
        $(".foo").eq(0).removeClass("hide");
    }, 3000);
});

$(".foo").on("transitionend", function(evt) {
    console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000);
});

这是6秒钟的CSS过渡时间:

this is with a CSS transition duration for 6 seconds:

transition-duration: 6s;

但是双方都保留了动画.左边的框实际上是在原始动画的中间动画为新值"，因此左边的框需要9秒才能完成，而右边的框需要6秒才能完成.

But both kept the animation. The left box actually "animate to a new value in the middle of the original animation", so it took 9 seconds for the left to finish, while the right box took 6 seconds to finish.

此外，Firefox在 http://jsfiddle.net/HA8s2/32/<中只有两个事件/a>间隔2秒，而不是3秒.

In addition, Firefox only have the two events in http://jsfiddle.net/HA8s2/32/ separated by 2 seconds, instead of 3 seconds.

问题是:如何按照mozilla.org中的文档所述，使Transitionend停止? (而不是其他任何蛮力方法).

The question is: how do I make the transitionend stop as described in the docs in mozilla.org? (and not by any other brute force method).

(换句话说，我想找出transitionend不会触发并进行测试的所有情况).

(in other words, I want to find out all the situations that the transitionend will not fire and test it out).

更新:如果我将display: none添加到左侧的框中(如另一个属性值.

Update: I was able to abort the animation if I add display: none to the box on the left, as on http://jsfiddle.net/HA8s2/34/ and won't be able to abort it if it is visibility: hidden as in http://jsfiddle.net/HA8s2/35/ but these do not really "change" the property's value as the docs says -- it is to add or change another property value.

推荐答案

您不能为它提供一个覆盖过渡属性的新类，将其删除吗?

Couldn't you give it a new class that overrides the transition property, removing it?

您当前的代码如下:

.myelem { transition: 0.5s all; }

您将添加以下代码:

.alsothis { transition: none; }

将alsothis类应用于元素时，新的transition属性值将覆盖另一个属性值，从而删除动画效果.

When you apply the alsothis class to your element, the new transition property value will override the other one, removing the animation effect.

这篇关于对于JavaScript或jQuery，如何使Transitionend事件不触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！