我正在构建基于 CSS3 过渡的非 jQuery 响应式图像滑块。
结构很简单:一个视口和内部相对定位的 UL,带有左浮动 LI。
在这种情况下我面临一个问题:
- 用户单击“上一个”箭头。
- JS 在当前显示的 LI 节点之前附加适当的 LI。
- 目前 UL 已将 CSS 过渡设置为
none 0s linear
防止动画更改。在这一刻,我将 UL CSS 左值减小滑块宽度(假设:从 0px 到 -1200px)以使视图与原来相同。 - 现在我将 UL 的转换属性更改为
all 0.2s ease-out
. - 现在我正在改变 UL 的 left 属性来触发 CSS3 动画。(假设:从 -1200px 到 0px)。
问题是什么?浏览器简化了更改并且不制作任何动画。
Stoyan Stefanov 在他的博客上写了关于回流问题的文章,但在这种情况下,试图强制对元素进行回流是行不通的。
这是一段代码(为了简化,我跳过了浏览器前缀):
ul.style.transition = 'none 0s linear 0s';
ul.style.left = '-600px';
ul.style.transition = 'all 0.2s ease-out';
ul.style.left = '0px';
这是查看实际问题的小提琴:http: //jsfiddle.net/9WX5b/1/