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 回答