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

【问题标题】：TailwindCSS animations on conditionally rendered components in React在 React 中条件渲染组件上的 TailwindCSS 动画
【发布时间】：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_ 在他们的回答中建议的那样做，或者您可以提供一些实际的淡入淡出动画等。

标签： javascript css reactjs next.js tailwind-css

【解决方案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

【讨论】：