transition写对了但没动画，大概率是初始状态没设好：所有图片默认opacity:1导致无变化，需统一设opacity:0并手动设首张为opacity:1；禁用display:none改用opacity+pointer-events:none；避免left/margin位移，改用transform:translateX()触发GPU加速；手动切换前须清除定时器，Swiper导航失效多因nextEl/prevEl选择器不匹配。
transition写对了但没动画，大概率是初始状态没设好
轮播图加了 transition: opacity 0.4s 却从头到尾静止不动，常见原因是所有图片默认都是 opacity: 1，而 transition 只在“值发生变化”时才触发——从 1 到 1 没变化，自然不播动画。
实操建议：
- 给所有轮播图统一设初始样式：
img { opacity: 0; transition: opacity 0.4s; } - 第一张图必须在 JS 初始化时手动设为
opacity: 1，否则全黑屏 - 别用
display: none切换显隐——它会中断过渡；改用opacity+pointer-events: none控制交互 - 检查是否误加了
will-change: opacity却没配对应触发逻辑，反而干扰渲染
用 left/margin-left 做位移，动画卡顿不是 bug 是必然
想靠 left: -100% 或 margin-left: -100% 实现滑动，动画大概率掉帧、一顿一顿。这不是代码写错，而是浏览器被迫频繁重排（reflow）。
实操建议：
- 改用
transform: translateX(-100%)，它走合成层，GPU 加速，不触发布局 - 所有轮播项（
.slide）设position: absolute，父容器设position: relative和固定宽高 - 过渡只写在容器或当前活跃项上，例如：
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 避免在
transform同时还操作width、height或top/left，会退化回重排路径
自动轮播跑起来了但手动点就跳帧，定时器没清理干净
用 setInterval 实现自动播放后，用户一按导航按钮，图片直接“瞬移”过去、没过渡动画——这是定时器还在后台运行，和手动切换逻辑冲突了。
实操建议：
- 每次手动切换前，先
clearInterval(timerId)清掉旧定时器 - 鼠标悬停（
mouseenter）时暂停，移出（mouseleave）后重新setInterval - 点任意按钮（包括指示点）都要重置计时器，否则用户点完第2张，3秒后却切到第4张
- 别把定时器 ID 存成全局变量，封装进轮播实例对象里，避免多个轮播互相污染
Swiper 导航箭头点了没动画，90% 是选择器配错了
Swiper 配了 creative 动效，拖拽和键盘都流畅，唯独自定义箭头一点就“啪”地跳过去——不是 Swiper 不支持，而是它根本没接管那个按钮的点击事件。
实操建议：
- 检查
navigation.nextEl和prevEl的 CSS 选择器是否和真实 DOM 完全一致，比如写了".next-btn"但实际 class 是"next2"，就会失效 - 确认按钮没有被
event.stopPropagation()或preventDefault()拦截，Swiper 需要原生 click 流通 - 不要在按钮上直接调
swiper.slideNext(0)，这个0表示无动画跳转，应去掉参数或用swiper.slideNext() - 初始化 Swiper 前确保 DOM 已就绪，否则选择器查不到元素，配置静默失败
纯 CSS 方案能做淡入淡出或简单位移，但无法响应用户操作、无法循环重置、无法暂停/恢复——这些动态控制点，绕不开 JS。最易被忽略的是：动画是否生效，往往不取决于“怎么写 transition”，而取决于“什么时候开始变”和“有没有被其他样式覆盖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
