必须先将元素设为 translatex(-100%) 且 opacity: 0，再配合 animation: slidein 0.4s ease-out forwards，否则会闪动；js 应通过 class 切换而非内联样式控制动画。
直接给元素加 animation 不会滑入，只会“闪一下”——因为默认状态下元素就在文档流里，没被藏到视口外。
必须先让元素“消失在左边”再动
滑入动画的起点不是“开始动”，而是“一开始就不在那儿”。常见错误是只写 @keyframes，却忘了设初始 transform: translateX(-100%) 或等效偏移。
-
translateX(-100%)表示向左移动自身宽度的 100%，适合响应式元素（如图片、卡片） - 固定宽元素（如侧边栏）建议用具体值，比如
translateX(-300px)，避免百分比计算歧义 - 别只靠
visibility: hidden或display: none：前者不释放布局空间但动画仍可能卡顿；后者根本不会触发动画 - 配合
opacity: 0更稳妥，防止元素在位移前短暂可见
animation 属性里这几个值不能少
forwards 是最容易漏的关键字——没有它，动画播完会立刻跳回初始位置。
-
animation: slideIn 0.4s ease-out forwards是最小可用组合 -
ease-out比linear更自然，尤其对入场动作 - 别加
animation-delay控制触发时机，容易和 JS 添加类的时机冲突；该由 JS 控制类名增删，而不是靠 CSS 延迟 - 如果父容器有
overflow: hidden，确保translateX(-100%)不被意外裁切（比如父容器 padding 或 border 影响计算）
JS 触发时别直接操作 style
用 class 切换最可靠。直接写 element.style.animation = "slideIn..." 容易被内联样式权重覆盖，且难复用。
- 初始状态写在基础类里：
.box { transform: translateX(-100%); opacity: 0; } - 动画类单独定义：
.box--in { animation: slideIn 0.4s ease-out forwards; } - JS 只做一件事：
box.classList.add("box--in") - 如果要支持反复开关，记得动画结束后手动清理类名，或用
animationend事件监听
真正麻烦的不是写动画，而是让元素在动之前“彻底不可见且不占位”。transform + opacity + forwards 这三者缺一不可，漏一个就容易看到闪动、跳变或回退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
