更改CSS时强制浏览器触发回流
我正在构建基于CSS3转换的非jQuery响应式图像滑块。
结构很简单:一个视口和内部相对定位的UL与左侧浮动的LIs。
在这种情况下，我面临着一个问题：
- 用户点击“上一步”箭头。
- JS在当前显示的LI节点前附加适当的LI节点。
- 目前UL已将CSS transition设置为
none 0s linear，以防止动画更改。现在，我将UL CSS left值减少滑块宽度(比如:从0px到-1200px)，以使视图与以前一样。现在，我正在将UL的all 0.2s ease-out. - Now属性更改为
- ，我正在更改UL的left属性，以触发CSS3动画。(假设:从-1200px到0px)。
有什么问题吗？浏览器简化了更改，并且不制作任何动画。
Stoyan Stefanov在他的博客here上写了关于回流问题的文章，但在这种情况下，试图在元素上强制回流是行不通的。
这是一段这样做的代码(为了简化起见，我跳过了浏览器前缀)：
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/
回答 2
Stack Overflow用户
发布于 2014-02-10 05:14:35
请求元素的offsetHeight可以很好地完成所有工作。您可以使用此函数强制回流，并将样式已更改的元素传递给它：
function reflow(elt){
console.log(elt.offsetHeight);
}在需要回流的地方，称之为回流。请参阅此示例：http://jsfiddle.net/9WX5b/2/
编辑:最近需要这样做，并想知道是否有比console.log更好的方法。你不能只写elt.offsetHeight作为它自己的语句，因为优化器(至少Chrome的)不会触发回流，因为它只是访问一个没有设置getter的属性，甚至不需要计算它。因此，AFAIK最便宜的方法是void(elt.offsetHeight)，因为它不确定void是否有副作用。(可以被覆盖或其他，idk)。
Stack Overflow用户
发布于 2017-07-19 02:41:48
function reflow( element ) {
if ( element === undefined ) {
element = document.documentElement;
}
void( element.offsetHeight );
}它在Chrome和FF上运行良好，似乎是最简单和最便携的ATM方式。
https://stackoverflow.com/questions/21664940
复制相似问题