React中使用TailwindCSS实现条件渲染组件的状态过渡动画

问题原因 #

你当前用&&短路逻辑做条件渲染，当successMessage变为false时，组件会直接从DOM树卸载，Tailwind过渡类需要作用在已挂载DOM的属性变化上，根本没有执行退出动画的时间，所以看不到效果。

方案1：不卸载组件，用样式控制显隐（最简单实现） #

始终挂载组件，用状态控制透明度、高度等可过渡属性的变化，修改后代码如下：

<div 
  className={`flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded ${
    successMessage 
      ? 'opacity-100 h-auto py-2 scale-100' 
      : 'opacity-0 h-0 py-0 scale-95 overflow-hidden pointer-events-none m-0'
  }`}
>
  <p>Added to watchlist!</p>
  <button onClick={() => setSuccessMessage(false)}>X</button>
</div>

注意要给隐藏状态明确的属性初始值，同时把内边距、外边距也同步设置为0，避免隐藏后残留空白区域。

方案2：需要卸载组件时，配合过渡库实现 #

如果组件隐藏后需要从DOM中移除，使用framer-motion的AnimatePresence组件处理卸载前的动画逻辑：

1. 先安装依赖：
   npm install framer-motion
2. 修改代码：

import { AnimatePresence, motion } from "framer-motion"

// 组件渲染部分
<AnimatePresence>
  {successMessage && (
    <motion.div 
      initial={{ opacity: 0, y: -8, scale: 0.95 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, y: -8, scale: 0.95 }}
      transition={{ duration: 0.3, ease: "easeInOut" }}
      className="flex bg-gray-200 w-44 items-center justify-between px-2 py-2 rounded"
    >
      <p>Added to watchlist!</p>
      <button onClick={() => setSuccessMessage(false)}>X</button>
    </motion.div>
  )}
</AnimatePresence>

该方案会在组件卸载前自动执行你定义的退出动画，动画结束后再移除DOM节点，适合弹窗、通知等需要频繁显隐的组件。

内容的提问来源于stack exchange，提问作者Eric Pezzulo