当requestAnimationFrame(callback);改变图像的宽度?重涂或回流

What occurs when requestAnimationFrame(callback); changes width of an image? repaint or reflow?

本文关键字：callback requestAnimationFrame 图像 改变      更新时间：2023-09-26

我读过一些关于回流和修复的主题，这是我设法理解的。

当对元素外观进行更改时，将发生重绘改变可见性，但不影响布局。

当元素的布局发生变化时，会发生回流。

无论如何,当

window.requestAnimationFrame(回调);

更新选定的图像元素改变它的宽度发生重绘或回流。在MDN中，回调参数描述为:

一个参数，指定在下次重绘时更新动画时调用的函数。

那么最终会发生什么，回流还是重新粉刷?

下面是我的问题的一个例子:

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();

谢谢你的回答。

改变width将触发回流和油漆。

相关文章：