用 transform + transition 是最稳方案，js 只切类名；避免 left/top 触发重排，改用 translatex() gpu 加速；配 transitionend 事件精准控制状态归位，禁用 display/visibility 过渡。
用 transform + transition 是最稳、最省心的方案，JS 只管切类名，别让它算动画。
为什么不能用 left 或 top 做滑入滑出
改 left/top 会触发浏览器重排（reflow），尤其在低端设备或复杂 DOM 下，动画容易卡顿甚至跳帧。而 transform: translateX() 走 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)；用ease也可以，但cubic-bezier更自然 - 别给父容器加
overflow: hidden后又让子元素 translate 超出太多——起始位移值（如100%）得确保不被裁掉
transitionend 事件比 setTimeout 可靠得多
轮播、Tab 切换这类需要“滑出完成后再清理状态”的场景，硬写 setTimeout(() => ..., 400) 极其危险：动画实际耗时受设备性能、系统负载、字体加载等影响，可能提前结束或延迟。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
transitionend事件，只对transform属性生效：el.addEventListener('transitionend', handler, { once: true }) - 滑出动画结束才
remove类名或设display: none，避免状态错乱 - 多个元素同时动画？别用同一个事件监听器混着处理——每个元素单独绑定，或用
e.propertyName === 'transform'过滤 - 注意：
transitionend在transform和opacity同时过渡时会触发两次，要判断e.propertyName
visibility 和 display 的隐藏时机必须卡准
淡出+滑出常一起用，但很多人一设 visibility: hidden 就让 opacity 过渡中断——因为 visibility 不支持过渡，它一写就立刻生效。
- 想释放布局空间？
display: none必须放在transitionend回调里，不能提前写在 CSS 类中 - 只想禁用交互又不占位？用
visibility: hidden+pointer-events: none，但同样得等动画结束再加 - 别对
display写transition——浏览器直接忽略，写了也白写 - 如果滑出后还要快速再滑入，保留
visibility: hidden比display: none更轻量，DOM 不用重挂载
真正难搞的不是怎么动起来，而是动完之后的状态归位和边界控制：多层嵌套 transform 会叠加，overflow: hidden 容器对子元素的 translate 裁剪很严格，移动端 Safari 对 will-change: transform 的内存管理也偏激——这些细节不踩一遍坑，很难说“动画做完了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
