0

当动画运行时，在它的第一帧上，即使关键帧属性不是布局属性，它也会触发布局计算。例如，这里的代码我只为复合属性（不透明度、变换）设置动画，但它只为第一帧触发布局。

el.animate(
  [
    {
      opacity: 0,
      transform: "translateX(0)",
    },
    {
      opacity: 1,
      transform: "translateX(30px)",
    },
  ],
  {
    duration: 500,
    fill: "forwards",
  }
);

这是 Chrome Devtools 性能结果的屏幕截图，显示触发了 Layout。 Chrome devtools，性能结果，触发动画并触发布局 这是 Firefox 性能结果的屏幕截图，没有触发布局。 Firfox 性能结果，已触发动画且未触发布局

对于动画 SVG 元素，Layout 会被触发多次。

我正在为 SVGg元素设置动画，关键帧仅在更改opacity和transform. 第一帧触发 Layout change，但最后 4 帧也触发 Layout change。 Google Devtools Performance SVG 结果，最后 4 帧触发布局更改

我的问题是，这是一个错误吗？

const stacks = document.querySelector(".stacks");

setTimeout(() => {
  stacks.animate(
    [
      {
        opacity: 0,
        transform: "translateX(0)",
      },
      {
        opacity: 1,
        transform: "translateX(100px)",
      },
    ],
    {
      duration: 500,
      fill: "forwards",
    }
  );
}, 3000);
html,
body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-container {
  width: 100px;
  height: 100px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 50px;
  background: red;
}

.inner-box {
  width: 50px;
  height: 50px;
  background: blue;
}
<body>

  <div class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" data-hk="0.0.0.1.0.5.3" aria-hidden="true" data-prefix="fab"
      data-icon="stack-overflow" class="svg-inline--fa fa-stack-overflow fa-w-12" viewBox="0 0 384 512">
      <path d="M322.2 440H42.7V320h-40v160h359.5V320h-40z" />
      <g class="stacks" opacity="0">
        <path
          d="M282.5 360h-200v39.7h200zM262 32l-32 24 119.3 160.3 32-24zM310.5 263.7L129.2 179l-16.7 36.5L293.7 300zM341.7 224L188.2 95.7l-25.5 30.8 153.5 128.3zM290.7 311L95 269.7 86.8 309l195.7 41z" />
      </g>
    </svg>
  </div>

</body>

4

0 回答 0