最可控、性能最好、兼容性够用的滑入滑出方式是 transform + transition，js仅切换类名；滑入从右设 translatex(100%)→0，滑出向左设 translatex(-100%)，配 cubic-bezier 过渡；禁用 left/top 防重排；scrollto 仅用于锚点滚动，非元素动画；轮播需用 animationend 控制状态，避免 settimeout；注意多层 transform 与 overflow 的边界问题。
直接用 transform + transition 是最可控、性能最好、兼容性也够用的方式，不需要 JS 就能完成基础滑入滑出；JS 只需负责切换类名，不参与动画计算。
用 transform 实现左右滑入滑出（推荐）
核心是让元素初始位置偏移视口外，再通过 transform: translateX() 归位。比改 left/right 更高效（触发 GPU 加速），也不影响文档流。
- 滑入从右：初始设
transform: translateX(100%)，激活时加类变为transform: translateX(0) - 滑出向左：旧元素加
transform: translateX(-100%)，动画结束后可设display: none或保持隐藏状态 - 必须配
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)，cubic-bezier比ease更自然 - 别用
top/left做滑动——会触发重排（reflow），卡顿明显
用 scrollTo 实现页面内锚点平滑滚动
这不是“元素滑入”，而是整个视口滚动到某位置，但用户常混淆它和滑动动画。它只适用于跳转到页面中已有 id 的元素顶部。
- 全局启用：在 CSS 中写
html { scroll-behavior: smooth; }，所有<a href="#section2"></a>自动平滑 - JS 主动滚动：
window.scrollTo({ top: element.offsetTop, behavior: 'smooth' })，注意offsetTop受父级position影响，嵌套定位元素要小心 - 不支持“滑出”效果：它只控制滚动位置，不能让某个块自己动起来
- 移动端 Safari 对
scroll-behavior: smooth支持较晚（iOS 15.4+），老版本需降级为 JSscrollTo+requestAnimationFrame
轮播图/幻灯片中切换时的滑动动画
这类场景要求“当前图滑出、下一张图滑入”同时发生，且动画结束前不能响应下一次点击，否则状态错乱。
- 关键不是加两个类，而是用
animationend事件做清理：滑出动画结束才remove旧元素的slide-out类，滑入动画结束才把旧元素display: none - 避免用
setTimeout等固定时间——动画实际耗时可能因设备性能或系统负载浮动 - 若用
transform: translateX()，记得给容器加will-change: transform（仅对频繁动画的元素），但别滥用，否则内存开销上升 - 横向轮播慎用
scrollLeft+scrollBehavior: smooth：它无法精确控制两张图的进出节奏，容易出现“半张图悬停”现象
真正难的不是写出第一个滑动效果，而是让多个滑动逻辑共存时不互相干扰——比如侧边菜单滑入时，轮播图不能意外触发切换；或者内容区滑入后，内部滚动不能被父级 transform 截断。这些边界情况往往在多层 transform 嵌套或 overflow: hidden 组合时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
