我正在基于CSS3过渡构建非jQuery响应式图像滑块。
结构很简单:一个视口和内部相对定位的UL,左侧浮动LI。
在这种情况下,我面临一个问题:
none 0s linear
all 0.2s ease-out
问题是什么?浏览器简化了更改,并且不制作任何动画。
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';
ul.style.transition = 'none 0s linear 0s';
ul.style.left = '-600px';
ul.style.transition = 'all 0.2s ease-out';
ul.style.left = '0px';
请求offsetHeight一个元素的效果很好。您可以使用此功能强制重排,并将样式已更改的元素传递给它:
offsetHeight
function reflow(elt){ console.log(elt.offsetHeight); }
编辑:最近需要这样做,并且想知道是否有比console.log更好的方法。您不能只写elt.offsetHeight自己的语句,因为优化器(至少是Chrome的)不会触发重排,因为它只是访问未设置getter的属性,甚至不需要评估它。因此,AFAIK最便宜的方法是void(elt.offsetHeight),因为它不确定是否void有副作用。(可以被覆盖,或类似的东西,idk)。
elt.offsetHeight
void(elt.offsetHeight)
void