4

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

关于如何强制过渡接受更新的持续时间的任何想法?

更新

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

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

属性的转换一旦开始,它必须根据原始计时函数、持续时间和延迟继续运行,即使“转换时间函数”、“转换持续时间”或“转换延迟”属性发生变化在过渡完成之前。

4

2 回答 2

2

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

于 2015-10-09T14:09:36.217 回答
1

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

于 2011-05-18T07:02:12.803 回答