Tailwind CSS 负载转换

Question

我正在尝试在 div 上添加不透明度过渡。 它应该从不透明度 0 开始，一旦它在屏幕上可见，它应该慢慢淡入，达到最大不透明度。

这是我的代码：

<div className="transition-opacity ease-in-out opacity-0 <STATE>:opacity-100 duration-300"> ... </div>

但是，我不知道 state 用于我的目的。 我应该用什么替换上面的 STATE？ 或者这不是正确的方法？

Answer 1

认为您在正确的轨道上，您只需要在加载时切换 class ：

const [loaded, setLoaded] = useState(false);

handleLoad = () => {
  setLoaded(true);
}

componentDidMount() {
  window.addEventListener('load', this.handleLoad);
}

<div className={`${loaded ? "opacity-100" : "opacity-0"}`>

如果 React 专家对此有更优雅的解决方案，很高兴知道:)