我目前正在编写一个 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)
属性的转换一旦开始,它必须根据原始计时函数、持续时间和延迟继续运行,即使“转换时间函数”、“转换持续时间”或“转换延迟”属性发生变化在过渡完成之前。