CSS transition-duration 不更新过渡？答案

【问题标题】：CSS transition-duration does not update the transition?CSS transition-duration 不更新过渡？
【发布时间】：2011-08-27 18:22:52
【问题描述】：

我目前正在编写一个 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）

属性的转换一旦开始，它必须根据原来的计时函数、持续时间和延迟继续运行，即使是“transition-timing-function”、“transition-duration”或“transition-delay” ' 属性在转换完成之前发生变化。

【问题讨论】：

标签： javascript css duration css-transitions

【解决方案1】：

刚刚用 Chrome 和 Safari 测试了你的第一个链接，它工作正常，就像 jQuery 示例一样 :)

【讨论】：

确认一下，第二次点击被忽略的 CSS 示例。

【解决方案2】：

当我需要覆盖 transition-duration 但保持 transition-property 完好无损时，我遇到了同样的问题。到目前为止，我发现的唯一简单解决方法是稍微更改转换属性，即，将 opacity: 0 改为 opacity: 0.0001。

【讨论】：