在 React 中条件渲染组件上的 TailwindCSS 动画

Posted 2023-03-07

【中文标题】在 React 中条件渲染组件上的 TailwindCSS 动画

【英文标题】：TailwindCSS animations on conditionally rendered components in React

【发布时间】：2021-12-20 18:18:57

【问题描述】：

如果我根据某些状态有条件地渲染组件，如何在 React with TailwindCSS 中为其打开和关闭状态之间的转换设置动画？

successMessage && (
              <div className="flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded">
                <p>Added to watchlist!</p>
                <button onClick=() => setSuccessMessage(false)>X</button>
              </div>
            )

此代码一半有效，但没有动画或过渡期。我该如何解决这个问题？

【问题讨论】：

您可以按照 MB_ 在他们的回答中建议的那样做，或者您可以提供一些实际的淡入淡出动画等。

【参考方案1】：

试试这样的：

  <div className=`flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded $your_state ? 'opacity-100' : 'opacity-0'`>
   ...
  </div>

【参考方案2】：

我建议使用 AOS 库来执行此操作，因为您需要做更多的工作才能使用 TailwindCSS。

试试这个

安装 Aos

npm install aos --save

放入你的文件

import React,  useEffect  from "react";
import AOS from 'aos';
import "aos/dist/aos.css";

useEffect(() => 
  AOS.init(
    duration : 1000
  );
, []);

您可以随意更改持续时间。

添加为 html 标签的属性 data-aos="animation_name"

例子

 <div> data-aos="fadeIn" </div>

你可以使用的额外属性

    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"

List of all animation

Documentation