通过opacity和transition实现淡入淡出效果，结合visibility控制元素显示状态，利用类切换触发动画，避免使用display以保证过渡平滑，适用于提示框、模态窗等场景。
使用 CSS transition 与 opacity 结合，可以轻松实现元素的淡入淡出效果。这种方法性能好、代码简洁，且无需 JavaScript 即可完成基本动画。
基本原理
通过改变元素的 opacity 值（从 0 到 1 实现淡入，从 1 到 0 实现淡出），并配合 transition 属性定义过渡时间与缓动函数，就能让显示或隐藏过程变得平滑。
实现步骤
以下是实现淡入淡出的常用方式：
设置初始透明度和过渡属性 通过类名控制状态切换 结合 display 或 visibility 控制布局影响
HTML 示例：
立即学习“前端免费学习笔记（深入）”；
CSS 样式：
Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。
145 查看详情 .fade-box {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s;
}
.fade-box.show {
opacity: 1;
visibility: visible;
}
在这个例子中：
opacity 控制透明度变化，产生视觉上的渐变效果 visibility: hidden 配合使用，避免用户可交互或看到完全透明的元素 transition 同时作用于两个属性，确保在 show 类移除时也能平滑淡出
JavaScript 控制显示/隐藏
可以通过 JS 动态添加或移除类来触发动画：
const box = document.querySelector(‘.fade-box’);
box.classList.add(‘show’); // 淡入
box.classList.remove(‘show’); // 淡出
如果希望淡出后彻底从布局中移除，可改用 display: none/block，但需注意 display 本身不能被 transition 过渡，因此仍推荐结合 visibility 使用。
优化建议
使用 will-change: opacity 可提升动画性能 避免频繁操作 DOM，尽量通过类切换控制状态 若需要更复杂动画，可考虑 @keyframes 配合 animation 属性
基本上就这些。只要掌握 opacity 和 transition 的配合逻辑，淡入淡出效果就能轻松实现，适用于提示框、模态窗、轮播图等常见场景。
以上就是css transition与opacity结合实现淡入淡出效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1020350.html
微信扫一扫 
支付宝扫一扫 
