<p>必须在初始 class 中同时声明 transition-opacity 和 opacity 类，否则无动画；hover 用 hover:opacity-* 实现轻量过渡，JS 控制时需固定 transition 类；transition-opacity 可中断、性能好，animate-fadeIn 是一次性 keyframes 动画。</p>
直接用 transition-opacity + opacity 类就能实现，但必须确保 transition 声明在初始渲染时就存在，否则会跳变。
为什么加了 opacity-0 和 opacity-100 却没动画？
根本原因是缺少 transition-opacity，或者它没出现在元素首次挂载的 class 列表里。Tailwind 的 transition 类不会“追加生效”，只对已声明的属性起作用。
-
transition-opacity必须和opacity-0或opacity-100一起写在初始 class 中，不能等 JS 更新状态后再加 - 只写
opacity-0和opacity-100，不带transition-opacity→ 切换时直接跳变，无过渡 - 写了
transition-opacity但没配duration-类（如duration-300）→ 浏览器用默认 0ms，肉眼不可见
hover 触发淡入/淡出的写法
这是最轻量、无需 JS 的方式，适合按钮、卡片悬停反馈。
- 淡入：初始
opacity-0，hover 时hover:opacity-100，配合transition-opacity duration-300 - 淡出：初始
opacity-100，hover 时hover:opacity-0 - 缓动可选
ease-in-out，避免生硬；别用ease-in做淡入，开头太慢
示例：<div class="opacity-0 hover:opacity-100 transition-opacity duration-300 ease-in-out">悬停显示</div>
立即学习“前端免费学习笔记（深入）”；
JS 控制显隐时的淡入淡出
适用于 React/Vue 等框架中由状态驱动的显示逻辑，比如模态框、下拉菜单。
- class 必须固定含
transition-opacity duration-300，然后靠状态切opacity-0/opacity-100 - 错误写法：
className={`${isVisible ? 'opacity-100' : 'opacity-0'}`—— 缺transition-opacity，必跳变 - 正确写法：
className={`transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}` - 注意：opacity 降到 0 后元素仍在 DOM 中，仍占布局、响应事件；要真正移除，得监听
transitionend事件再更新状态
transition-opacity 和 animate-fadeIn 的关键区别
别混用 —— 它们解决的是不同场景的问题。
-
transition-opacity是声明式、可中断、可逆的；hover 进来一半又移出，会平滑回退 -
animate-fadeIn（来自tailwindcss-animate）是命令式、一次性播放的 keyframes 动画；播完就停在opacity: 1，不响应中途取消 -
transition-opacity性能更好，走合成层；animate-fadeIn若搭配 transform 外属性可能触发重排 - 加载即播的“首次渐入”，
transition-opacity本身做不到（没初始状态变化），得靠自定义@keyframes appear+animation
opacity 降为 0 后是否从 DOM 移除，这点常被忽略：它只是看不见，但依然挡点击、占空间。真要清理，得靠 JS 配合 transitionend 或 animationend 手动更新状态。
