你如何使用带有 React Hooks 的 Tailwind 动画类？答案

【问题标题】：How do you use Tailwind animate classes with React Hooks?你如何使用带有 React Hooks 的 Tailwind 动画类？
【发布时间】：2022-10-31 22:55:18
【问题描述】：

例如 - 在来自网络套接字的新消息上添加动画平。

【问题讨论】：

标签： reactjs react-hooks tailwind-css

【解决方案1】：

Tailwind just-in-time 可能是您不能这样做的原因。

基本上，如果animate-ping 没有在您的文件中被抓取，那么以后通过 Javascript 或任何其他方式添加它将根本不起作用，因为生成的 CSS 文件将不包含animate-ping。

即使这意味着使用 Tailwind 的 @apply 指令，您也应该在 CSS 中创建自己的类。稍后在构建时从未解析过的 DOM 中添加 Tailwind 类将简单地......不起作用。

【讨论】：

谢谢！我现在会坚持react-spring.dev。我认为这会容易得多。

【解决方案2】：

有条件地显示一个类将是这样的：

function Notification() {
  const [isNotification, setIsNotification] = useState(false);

  return (
    <div className={` ${isNotification ? "animate-ping" : null} h-2 w-2 m-5 bg-sky-400 rounded-full`}></div>
  );
}

【讨论】：

它不起作用或动画循环播放