javascript - 对于JavaScript或jQuery，如何使transitionend事件不触发？

Question

在链接中:

https://developer.mozilla.org/en-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。

示例:(单击 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);
});

CSS 过渡持续时间为 6 秒:

transition-duration: 6s;

但两者都保留了动画。左边的框实际上“在原始动画的中间动画到一个新值”，所以左边的框花了 9 秒才完成，而右边的框花了 6 秒才完成。

另外，Firefox只有http://jsfiddle.net/HA8s2/32/中的两个事件间隔 2 秒，而不是 3 秒。

问题是:如何按照 mozilla.org 文档中的描述停止转换？ (而不是通过任何其他暴力方法)。

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

更新:如果我将 display: none 添加到左侧的框中，就可以中止动画，如 http://jsfiddle.net/HA8s2/34/ 所示。如果它是 visibility:hidden (如http://jsfiddle.net/HA8s2/35/)，则无法中止它但这些并没有真正像文档所说的那样“改变”属性的值——而是添加或改变另一个属性值。

Answer 1

你不能给它一个新的类来覆盖转换属性，并将其删除吗？

您当前的代码如下:

.myelem { transition: 0.5s all; }

您将添加以下代码:

.alsothis { transition: none; }

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