时间戳

首页 > 解决方案 > Lighthouse 认为打字机动画是布局转变

reactjs - Lighthouse 认为打字机动画是布局转变

问题描述

正如标题所示，我正在使用typewriter-effect包，这给了我一个很酷的打字机动画。

然而，Lighthouse 认为这是一种布局转变，并且计入 CLS 分数。除了忽略分数或停止使用动画之外，还有什么方法可以迁移它？

我的网站顺便说一句。

标签： reactjslighthouse

解决方案

是的，这是 Lighthouse 布局变化的正确行为。

要解决这个问题，您需要考虑部分大小，所以在打字机部分的容器width中使用and ，这样灯塔在渲染整个打字机部分和动画之前就知道该元素的大小。height

例如：

function TypeWriterSection () {
  return (
   <div className={{height: '350px', width: '500px'}}>
     // ...
   </div>
  )
}

推荐阅读