javascript - CSS transition-duration 不更新过渡？

Question

我目前正在编写一个 jQuery 插件来创建/管理 CSS 过渡，我发现这种奇怪的行为与过渡持续时间有关。

显然，在运行转换时，对持续时间属性的任何更改都将被忽略，除非正在转换的属性接收到不同的值。持续时间本身不会导致过渡发生变化。

下面是一些显示此示例的代码，下面是一些指向 jsFiddle 的链接，可让您更好地了解我试图实现的转换行为。

    /* starting transition */
    .t1 {
        -webkit-transition-duration: 5s;
        -webkit-transition-property: width;
        width: 500px;
    }

    /* during the above, this will do nothing */
    .t2 {
        -webkit-transition-duration: 200ms;
        -webkit-transition-property: width;
        width: 500px;
    }

    /* but this will override the transition as expected */
    .t3 {
        -webkit-transition-duration: 200ms;
        -webkit-transition-property: width;
        width: 501px; /* 1 pixel added */
    }

• jsFiddle 1 - CSS 持续时间问题:http://jsfiddle.net/danro/Kd58j/

• jsFiddle 2 - 使用 jQuery 的预期效果:http://jsfiddle.net/danro/xPwc4/

关于如何强制过渡接受更新的持续时间有什么想法吗？

更新

看起来规范中定义了这种行为，但如果有人有解决方法，我仍然愿意接受。

(来自 www.w3.org/TR/css3-transitions/#starting)

Once the transition of a property has started, it must continue running based on the original timing function, duration, and delay, even if the ‘transition-timing-function’, ‘transition-duration’, or ‘transition-delay’ property changes before the transition is complete.

Answer 1

当我需要覆盖 transition-duration 但保持 transition-property 不变时，我遇到了同样的问题。到目前为止，我发现的唯一简单解决方法是实际稍微更改过渡属性，即，将 opacity: 0 改为 opacity: 0.0001.