轮播点点击切换的过渡效果必须加在图片容器（如.carousel-track）的transform属性上，而非轮播点本身；正确写法为transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)，并需同步清除自动轮播定时器、做好索引映射与防抖。
轮播点（pagination dots）点击切换时如何加过渡效果
轮播点本身不直接控制图片位移，它只是“触发器”；真正需要加过渡效果的是图片容器（.slides 或 .carousel-track）的 transform: translateX() 变化。点按切换的本质是更新索引并立刻应用偏移量，过渡效果必须绑定在该容器上，而非 dot 元素本身。
为什么给 dot 加 transition 没用
给 .dot 元素加 transition: background-color 0.3s 只能实现“高亮变色”的微动效，和图片切换完全无关。用户要的“切换过渡”，是指图片滑入滑出的过程——这个过程必须由承载所有图片的容器完成位移+过渡，否则就是瞬切、无动画。
- 常见错误：只写
.dot.active { background: #007bff; transition: background 0.2s; }→ 点变色了，图还是啪一下跳过去 - 正确做法：过渡声明必须落在图片容器上，且只对
transform生效 - 如果用了
opacity切换（淡入淡出），则过渡需写在单张.slide上，且每次只显示一张、其余opacity: 0
transition 写在哪？参数怎么配才顺滑
过渡必须写在负责位移的容器上，且只作用于 transform，避免触发布局重排。推荐写法：
.carousel-track {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更快启动、更缓收尾，视觉上更“跟手” - 绝对不要写
transition: all 0.4s—— 万一后续加了width或margin，会意外触发重排卡顿 - 如果用
opacity方案，过渡写在.slide上：transition: opacity 0.35s ease-in-out，并确保每次只有一张opacity: 1，其余为0
点按切换时容易忽略的两个同步问题
用户点击第 3 个 dot，图片滑到第 3 张，但过渡可能被中断或错位——这通常是因为状态没对齐：
立即学习“前端免费学习笔记（深入）”；
- 定时器未清除：自动轮播的
setInterval和点按操作共用同一套索引逻辑，点按时必须clearInterval(timer)，否则新旧偏移量打架 - 索引计算偏差：比如有 5 张图，但用了无限循环（首尾复制），实际 DOM 有 7 个
.slide，点第 3 个 dot 应跳转到真实索引 2，而不是 DOM 索引 2 —— 需做映射转换 - 移动端 touch 事件未节流：快速连点 dot 可能触发多次
translateX设置，建议加 100ms 防抖（setTimeout+ 标志位）
transition 的 transform。最常漏掉的是清除定时器和索引映射，这两处一错，动画就断在半路。 
