必须用transform: translatex()而非left，因其由gpu加速、不触发重排重绘，而left强制每帧执行layout→paint→composite，导致卡顿闪屏；轮播容器需设position: relative，子项position: absolute，过渡声明写在容器上。
轮播图过渡效果卡顿、闪屏或根本不动，基本都是因为用了 display 切换或 left/margin-left 位移——这两类写法在现代浏览器里已明确属于性能反模式。
为什么用 transform: translateX() 而不是 left
修改 left 或 margin-left 会强制浏览器反复触发 layout（重排），尤其在中低端设备上帧率常跌破 30fps；而 transform 属于合成层操作，由 GPU 加速，不触发布局，是唯一能保证顺滑的位移方式。
- 所有轮播项必须设为
position: absolute，父容器加position: relative和固定宽高 - 切换逻辑只改容器的
transform: translateX(-300px)，不要改单个 slide 的位置 - 过渡声明必须写在移动的容器上，比如
.slides { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
淡入淡出过渡怎么避免闪烁
用 display: none/block 切换必然闪，因为 display 不可动画。正确做法是让所有 slide 始终占据相同位置，仅靠 opacity + transition 控制可见性。
- 每个
.slide设position: absolute; top: 0; left: 0; opacity: 0; - 给
.slide加transition: opacity 0.3s ease-in-out; - JS 切换时只操作
.slide.active { opacity: 1; }，其他保持 0 - 注意：必须配合
z-index确保 active 项在最上层，否则会被遮挡
自动轮播和手动切换同时存在时的冲突
用户刚点下一页，定时器又触发一次切换，会导致跳两张、错位甚至动画中断。核心是「同一时间只能有一个位移动作在执行」。
- 每次 JS 触发位移前，先清除当前定时器：
clearInterval(this.autoPlayTimer) - 位移动画结束后（可用
transitionend事件监听），再重新启动定时器 - 禁止在动画进行中响应新的点击，可加锁：
this.isTransitioning = true，动画结束再置为false - 如果用
requestAnimationFrame自定义动画，更要确保每次只运行一个帧循环
真正难的不是写出过渡代码，而是理解哪些 CSS 属性会触发重排、哪些事件需要防抖、以及动画状态和定时器之间如何协同。这些细节一旦漏掉，轮播图就会在真实机型上突然卡住或错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
