1

在链接中：

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/但这些并没有像文档所说的那样真正“改变”属性的值——它是添加或更改另一个属性值。

4

1 回答 1

0

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

您当前的代码如下：

.myelem { transition: 0.5s all; }

您将添加以下代码：

.alsothis { transition: none; }

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

于 2013-07-30T06:46:46.837 回答