[英]For JavaScript or jQuery, how to make transitionend event not fire?
In the link: 在链接中:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions
it is said that: 据说:
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. 注意:如果中止过渡,则过渡结束事件不会触发,因为在过渡完成之前会更改动画属性的值。
So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox. 因此,我继续使用Chrome和Firefox在http://jsfiddle.net/HA8s2/32/和http://jsfiddle.net/HA8s2/33/上进行了尝试。
example: (click on either the left or right box in jsfiddle) 示例:(单击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);
});
this is with a CSS transition duration for 6 seconds: CSS过渡持续时间为6秒:
transition-duration: 6s;
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. 左边的框实际上是“在原始动画的中间动画为新值”,因此左边的框需要9秒才能完成,而右边的框需要6秒才能完成。
In addition, Firefox only have the two events in http://jsfiddle.net/HA8s2/32/ separated by 2 seconds, instead of 3 seconds. 此外,Firefox在http://jsfiddle.net/HA8s2/32/中仅将两个事件间隔2秒,而不是3秒。
The question is: how do I make the transitionend stop as described in the docs in mozilla.org? 问题是:如何按照mozilla.org中的文档所述使Transitionend停止? (and not by any other brute force method). (而不是通过其他任何蛮力方法)。
(in other words, I want to find out all the situations that the transitionend
will not fire and test it out). (换句话说,我想找出transitionend
终端不会触发的所有情况并进行测试)。
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. 更新:如果添加display: none
我可以中止动画display: none
如http://jsfiddle.net/HA8s2/34/一样,在左侧的框中display: none
动画,如果visibility: hidden
也无法中止动画visibility: hidden
在http://jsfiddle.net/HA8s2/35/中,但这些并没有真正“改变”文档中所说的属性值,而是添加或更改了另一个属性值。
Couldn't you give it a new class that overrides the transition property, removing it? 您是否可以给它一个新的类,该类重写Transition属性,将其删除?
Your current code is like: 您当前的代码如下:
.myelem { transition: 0.5s all; }
You would add this code: 您将添加以下代码:
.alsothis { transition: none; }
When you apply the alsothis
class to your element, the new transition
property value will override the other one, removing the animation effect. 当您将alsothis
类应用于您的元素时,新的transition
属性值将覆盖另一个属性,从而消除动画效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.