我目前正在编写一个 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.
最佳答案
当我需要覆盖 transition-duration 但保持 transition-property 不变时,我遇到了同样的问题。到目前为止,我发现的唯一简单解决方法是实际稍微更改过渡属性,即,将 opacity: 0
改为 opacity: 0.0001
.
关于javascript - CSS transition-duration 不更新过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6040189/