[英]What occurs when requestAnimationFrame(callback); changes width of an image? repaint or reflow?
I have read some topics about reflow and repait this is what I maneged to understand. 我已经阅读了一些有关重排和重排的主题,这是我要理解的内容。
A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout.
当对元素外观进行更改以更改可见性但不影响其布局时,就会发生重新绘制。
A reflow occurs when changes are made to the elements layout.
对元素布局进行更改时会发生重排。
Anyway, when 反正什么时候
window.requestAnimationFrame(callback);
window.requestAnimationFrame(callback);
updates selected image element changing it's width what occurs repaint or reflow. 更新选定的图像元素,更改其宽度,从而发生重新绘制或重排。 In MDN the callback parameter was discriebed as:
在MDN中,回调参数的判别为:
A parameter specifying a function to call when it's time to update your animation for the next repaint.
一个参数,指定要在下一次重绘时更新动画时要调用的函数。
So what occurs after all, reflow or repaint? 那么,到底发生重排还是重涂?
Here is an example of my problem: 这是我的问题的一个例子:
var jediImg = document.getElementById('jedi-image'); jediImg.src = 'images/jedi-image.jpg'; jediImg.width = 400; var times = 20, update = -1; var isJediVisible = true; function animationFrame() { if (isJediVisible) { jediImg.width = 0; } else { jediImg.width = 400; } isJediVisible = !isJediVisible; jediImg.width = (20 - times) * 50; times += update; if (times === 0) { update = 1; } if (times == 20) { update = -1; } requestAnimationFrame(animationFrame); } animationFrame();
Thank you for your answers. 谢谢您的回答。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.