纯css实现淡入动画最简方案是opacity+transition：先设初始opacity:0，再声明transition:opacity 0.3s ease；必须写全属性名，禁用all；搭配visibility:hidden防占位交互，ie9+原生支持。
纯 CSS 就能搞定，不需要 JS；但写错一行 transition 声明，动画就完全不触发。
opacity + transition 是最简可行方案
核心就两步：设初始透明度、声明过渡行为。不是“加个动画属性”就行，而是必须让浏览器知道“从哪变到哪”以及“怎么变”。
-
opacity必须在默认状态（非:hover或.active）里设初值，比如opacity: 0 -
transition必须写全：比如transition: opacity 0.3s ease;，不能只写transition: all 0.3s;，否则可能意外带动其他属性 - 隐藏时建议搭配
visibility: hidden，防止元素透明但占位、可点击；显示时用visibility: visible - IE9+ 全支持，不用考虑兼容 fallback
为什么 JS 控制时动画常“一闪而过”或根本不执行
因为浏览器把连续样式修改合并成一次渲染，中间帧被跳过了。关键不是“怎么改 opacity”，而是“怎么让浏览器分两帧处理”。
- 直接写
el.style.opacity = '0'; el.style.opacity = '1';→ 无效，无过渡 - 正确做法之一：强制重排，
el.offsetHeight;放在两句之间，轻量且可靠 - 更推荐做法：操作 class，比如先
el.classList.remove('show');，再el.offsetHeight;，最后el.classList.add('show'); - 批量淡入多个元素时，别用 for 循环同步改 style，要用
animation-delay或setTimeout错开起始时间
@keyframes 适合需要节奏控制或叠加效果的场景
当你要淡入同时上移 10px、或者先慢后快、或者循环播放，transition 就不够用了，得上 @keyframes。
- 定义动画必须包含
from和to，比如@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } - 应用时记得加
animation-fill-mode: forwards，否则动画一结束就回退到opacity: 0 - 一旦用了
forwards，后续想再淡出，就不能只靠切 class，得手动设opacity: 0或重新触发动画 - 慎用
animation-iteration-count: infinite做淡入淡出，容易造成视觉干扰
真正容易被忽略的是：过渡时间设成 0.1s 或 1.2s 都是错的——前者人眼几乎看不出变化，后者拖慢交互节奏。0.25–0.4s 是多数 UI 场景的舒适区间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
