在链接中:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
据说:
注意:如果过渡被中止,则不会触发 transitionend 事件,因为动画属性的值在过渡完成之前已更改。
所以我继续使用 Chrome 和 Firefox 在http://jsfiddle.net/HA8s2/32/和http://jsfiddle.net/HA8s2/33/上进行了尝试。
示例:(单击 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 过渡持续时间:
transition-duration: 6s;
但两者都保留了动画。左边的盒子实际上是“在原始动画中间动画到一个新的值”,所以左边用了 9 秒完成,而右边的盒子用了 6 秒完成。
此外,Firefox 仅将http://jsfiddle.net/HA8s2/32/中的两个事件间隔 2 秒,而不是 3 秒。
问题是:如何按照 mozilla.org 中的文档中的描述使 transitionend 停止?(而不是通过任何其他蛮力方法)。
(换句话说,我想找出所有transitionend
不会触发的情况并进行测试)。
更新:display: none
如果我添加到左侧的框中,我能够中止动画,就像在http://jsfiddle.net/HA8s2/34/visibility: hidden
上一样,如果它是在http://jsfiddle.net/HA8s2/34/ 上,将无法中止它。 /jsfiddle.net/HA8s2/35/但这些并没有像文档所说的那样真正“改变”属性的值——它是添加或更改另一个属性值。