轮播图过渡效果卡顿、闪屏或不动，根本原因是用了display切换或left/margin-left位移；必须用transform: translatex()替代，因其由gpu加速、不触发重排重绘，而left等会强制每帧执行layout→paint→composite；所有slide需设position: absolute，父容器加position: relative和固定宽高，过渡声明写在移动容器上，淡入淡出须用opacity+transition并配合z-index控制层级，同时需解决自动与手动切换冲突及过渡声明位置错误等问题。

轮播图过渡效果卡顿、闪屏或根本不动，基本都是因为用了 display 切换或 left/margin-left 位移——这两类写法在现代浏览器里已明确属于性能反模式。

为什么必须用 transform: translateX() 而不是 left

修改 left 或 margin-left 会强制浏览器反复触发 layout（重排），尤其在中低端设备或内容较多时，帧率常跌破 30fps；而 transform 属于合成层操作，由 GPU 加速，不触发布局，是唯一能保证顺滑的位移方式。

• 所有轮播项（.slide）必须设为 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 控制可见性。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 每个 .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

最容易被忽略的是：过渡声明没写在真正发生位移的元素上，而是写在了子项或错误容器上；还有就是忘记给父容器设固定宽高，导致 position: absolute 的子项脱离文档流后高度塌陷，视口显示异常。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！