加载时的 Tailwind CSS 过渡

Question

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

这是我的代码：

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

但是，我不知道该使用什么状态来达到我的目的。我应该用什么替换上面的 STATE？还是这不是正确的做法？

Answer 1

认为您的做法是正确的，您只需要在加载时切换一个类即可：

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

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

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

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

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

Answer 2

您可以定义在组件渲染后立即调用的动画。

在顺风中定义自定义动画：

• 前往

  tailwind.config.js

• 添加新动画：

module.exports = {
   ...,
   theme: {
     ...,
     extend: {
       ...,
       keyframes: {
       appear: {
          "0%": {
             opacity: "0",
          },
          "100%": {
             opacity: "1",
          },
       },
     }
}

• 在您的文件中以顺风方式使用动画：

<div className="animate-[appear_150ms_cubic-bezier(0.4,_0,_0.2,_1)_1500ms_forwards]" />

Answer 3

尝试添加这个

<div className="duration-75">

...