加载时的 Tailwind CSS 过渡答案

【问题标题】：Tailwind CSS transition on load加载时的 Tailwind CSS 过渡
【发布时间】：2022-09-28 16:12:22
【问题描述】：

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

这是我的代码：

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

但是，我不知道为我的目的使用什么状态。我应该用什么替换上面的状态？或者这不是正确的方法？

我会考虑使用 IntersectionObserver 来检测它何时在视图中，然后使用一些 javascript，删除 opacity-0 类，并添加 opacity-100。

标签： javascript html css reactjs tailwind-css

【解决方案1】：

认为你在正确的轨道上，你只需要在加载时切换一个类：

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

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

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

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

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

【讨论】：

如果您需要检查视口中的可见性，我会建议类似github.com/thebuilder/react-intersection-observer

【解决方案2】：

尝试添加这个

<div className="duration-75">

...

【讨论】：