Question

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

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

以下是一些显示此示例的代码，下面是一些指向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）

一旦属性的转换开始，它必须根据原始的定时功能，持续时间和延迟继续运行，即使“转换时间功能”，“转换持续时间”或“转换延迟”也是如此'转换完成前属性发生变化。

Answer 1

刚刚测试了您与Chrome和Safari的第一个链接，它运行正常，就像jQuery示例：）

Answer 2

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

CSS transition-duration不会更新转换？

2 个答案: