如何使用CSS transition实现平滑的淡入淡出动画效果？-css教程-PHP中文网

transition-opacity 必须写在初始 class 中，否则无动画效果；正确写法是 transition-opacity duration-300 ${isvisible ? 'opacity-100' : 'opacity-0'}；需配合 transitionend 事件精准清理 dom。

如何使用css transition实现平滑的淡入淡出动画效果？

transition-opacity 必须写在初始 class 里，不能等切换时才加

很多人写 opacity-0 和 opacity-100 却没动画，问题出在漏掉了 transition-opacity。Tailwind 的过渡类必须作用于元素首次渲染时的 class 列表，否则浏览器根本不会监听 opacity 变化。

错误写法：div className={`${isVisible ? 'opacity-100' : 'opacity-0'}`}——切换 class 时只改 opacity，没有过渡声明，结果就是瞬间跳变。

正确写法：div className={`transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}`}

duration-300 必须显式指定，transition-opacity 本身不含时长
别用 transition-all 替代，它会把后续所有样式变更（比如 padding、color）都套上过渡，干扰预期效果
如果用原生 CSS，要确保 transition: opacity 0.3s ease; 写在默认状态（非 :hover 或 .active）里，否则回退动画失效

opacity 降到 0 后元素还在 DOM 里，得靠 JS 清理

仅靠 opacity-0 不等于隐藏：元素仍占布局空间、能响应 hover/click、影响 tab 键导航。要真正移除，必须等动画结束再更新状态。

推荐监听 transitionend 事件，而不是硬写 setTimeout：

监听 transitionend 更精准，不受时长误差或重排打断影响
需过滤事件：只响应 opacity 属性的结束，避免 height 或 transform 等其他过渡干扰
移除前先检查 event.propertyName === 'opacity' 和当前 opacity 值是否为 0

示例逻辑：el.addEventListener('transitionend', (e) => { if (e.propertyName === 'opacity' && getComputedStyle(el).opacity === '0') el.remove(); });

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载