广告淡入淡出需明确起点（默认opacity:0+transition）、精准触发（class切换防跳帧）、可靠收尾（transitionend后设display:none）；@keyframes更适合首屏自动播放，时长0.25–0.4s最自然。
广告元素加淡入淡出，不是“加个动画就完事”，而是必须控制好起点、触发时机和收尾逻辑；否则要么一闪而过，要么卡在半透明状态占位挡点击。
transition: opacity 必须写在默认状态里，不能只写在 .show 类中
很多人把 transition: opacity 0.3s ease 放在 .ad-show 类里，结果广告第一次出现时毫无过渡——因为浏览器没看到“从哪开始变”。起点必须明确声明。
-
.ad-banner默认样式里就要有：opacity: 0;+transition: opacity 0.3s ease;+visibility: hidden; -
.ad-banner.show只负责终点：opacity: 1;+visibility: visible; - 千万别用
transition: all 0.3s，广告容器里哪怕 margin 或 line-height 有隐式变化，都会引发抽搐或延迟启动
JS 切换 class 时要防“跳帧”，别直接连续赋值 style
写 el.style.opacity = '0'; el.style.opacity = '1'; 是无效的——两行被合并为一次渲染，浏览器根本没机会分帧处理过渡。
- 轻量方案：在两句之间插入强制重排语句，如
el.offsetHeight; - 推荐方案：用 class 控制，比如先
el.classList.remove('show');，再el.offsetHeight;，最后el.classList.add('show'); - 批量广告（如多个 banner 轮播）别用 for 同步改 class，否则全部同一帧启动；改用
setTimeout错开，或 CSS 的animation-delay
淡出后必须监听 transitionend，否则 display: none 会中断动画
很多人同时设 opacity: 0 和 display: none，结果动画中途卡死——display 不支持过渡，一设就立刻生效，opacity 过渡直接被砍断。
- 正确做法：只在淡出 class 中设
opacity: 0;，然后监听transitionend事件 - 在回调里执行
el.style.display = 'none';或el.style.visibility = 'hidden'; - 如果广告需要释放布局空间（比如避免撑高页脚），
display: none必须放事件回调里，不能提前写 -
display属性本身不支持transition，写了也白写
@keyframes 方案更适合首屏广告自动淡入
如果广告要在页面加载完立刻淡入（比如首屏 banner），靠 JS 加 class 有竞态风险——DOM 尚未 ready 就执行，容易失败。@keyframes 更稳，CSS 解析完就能播。
- 必须写的三项：
animation-name（如fadeIn）、animation-duration（建议0.35s）、animation-fill-mode: forwards - 漏掉
forwards会导致动画播完瞬间回退到opacity: 0，文字闪一下就消失 - 示例关键代码：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .ad-banner { animation: fadeIn 0.35s ease-out forwards; } - 注意字体加载抖动：若广告含自定义字体，加
font-display: swap并给容器预设line-height，防止重排导致淡入过程跳动
真正容易被忽略的是过渡时长和初始值位置：0.25–0.4s 是人眼感知最自然的区间；而 opacity: 0 必须写在 CSS 默认规则里，不能靠 JS 注入后再加 transition——浏览器只认“已知起点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
