transition-opacity 更可靠，因其基于 css transition 声明式控制，触发明确、可中断可逆；而 animate-fadeout 依赖 @keyframes + forwards，不处理 dom 移除与状态同步，易致元素残留、遮挡点击。
transition-opacity 为什么比 animate-fadeOut 更可靠
因为 transition-opacity 是基于 CSS transition 的声明式控制，动画触发时机明确、可中断、可逆；而 animate-fadeOut 依赖 @keyframes + forwards，只管“播放完停在 opacity: 0”，不处理 DOM 移除或状态同步，容易导致元素残留占位、遮挡点击。
常见错误现象：加了 animate-fadeOut 后元素瞬间消失，或淡出一半就卡住，或动画播完仍能被鼠标 hover 到——本质是没配合 JS 清理状态。
-
transition-opacity只需切换opacity-0/opacity-100，浏览器自动补间，无额外 JS 也能工作 - 它天然支持「中途取消」：比如 hover 进来时开始淡入，还没播完就移出，会平滑回退，
animate-类做不到这点 - 性能更好：transition 由合成层优化，
animate若含 transform 外属性可能触发重排
必须提前声明 transition 才能生效
很多人写 opacity-0 和 opacity-100 却没动画，问题出在没把 transition-opacity 放在「默认态」上。Tailwind 的 transition 类必须作用于初始渲染的元素，不能等 class 切换时才加上。
错误写法：div className={`${isVisible ? 'opacity-100' : 'opacity-0'}`} —— 缺少 transition-opacity，切换时直接跳变。
- 正确写法：
div className={`transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}`} - duration 必须显式指定，
transition-opacity本身不含时长，只声明过渡属性 - 别混用
transition-all：它会把后续所有样式变更（如 padding、color）都套上过渡，干扰预期效果
淡出后如何真正从 DOM 移除
opacity 降到 0 后元素仍在 DOM 中，依然占布局、响应事件。要彻底移除，得靠 JS 监听动画结束时机，再更新状态。
关键不是“怎么删”，而是“什么时候删”：太早删，动画没播完；太晚删，用户可能已点其他地方。
- 监听
transitionend事件，检查event.propertyName === 'opacity'，避免被其他 transition 干扰 - React 中用
useEffect+ref绑定事件，移除前先current?.removeEventListener - 防抖不是必须，但建议加个
!isVisible判断，避免重复执行setIsVisible(false) - 别用
setTimeout替代事件监听：时长难对齐，尤其用户切到后台再切回，计时器可能失准
多个元素依次淡入的坑
想让列表项一个接一个淡入，不是给每个加 delay 就行。CSS transition 不支持动态 delay，硬写 delay-100、delay-200 容易错乱，且无法响应数据增删。
真正可控的做法是用 JS 控制每个元素的 class 切换时机，或用 CSS 自定义属性驱动 transition-delay。
- 推荐方案：用
getBoundingClientRect()或 IntersectionObserver 触发单个元素的opacity-100，比全局 delay 更健壮 - 如果坚持用 Tailwind 的 delay 工具类，注意
delay-100是 100ms，不是 1s；最大 delay 是delay-[500]，超出需自定义 - 别在父容器上设
transition-opacity：opacity 不继承，子元素不会因此获得过渡效果
transition-opacity；要“复杂路径+循环+多属性联动”，才值得配 @keyframes。多数业务场景里，前者漏掉的那句 transition-opacity 就是动效卡顿的根源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
