向上位移动画需用@keyframes配合transform: translatey()实现，起始帧设为translatey(100%)，结束帧为translatey(0)，并配合animation: name duration timing-function forwards及opacity/visibility隐藏初始状态。
用 @keyframes 做向上位移动画，关键在起始位置设为 transform: translateY(100%)
元素“出现时向上移入”，本质是让元素从屏幕下方（或不可见位置）滑到目标位置。不能靠 top 或 margin 动画——它们会触发重排，性能差，且初始状态难控制。必须用 transform: translateY()，配合 @keyframes 定义位移路径。
常见错误是把起始值设成 translateY(0) 或留空，结果没位移感；或者用 opacity 混合动画但没配好 timing，导致“闪一下才动”。
- 起始帧（
0%）设transform: translateY(100%)：让元素默认在视口底部外，100% 是相对于自身高度，稳妥 - 结束帧（
100%）设transform: translateY(0)：回到原始位置，不改变文档流 - 动画触发用
animation简写属性，别漏forwards，否则动画完会跳回起点
animation 的 4 个必要参数不能少：名称、时长、缓动、填充模式
只写 animation: slide-up 0.3s 是不够的——缺了缓动函数和填充模式，动画会生硬，且结束后元素立刻复位。
典型写法：animation: slide-up 0.3s ease-out forwards。其中：
-
slide-up是你定义的@keyframes名，大小写敏感，别拼错 -
0.3s是合理区间，小于 0.2s 显得太快难感知，大于 0.5s 容易打断用户操作节奏 -
ease-out比linear更自然，避免匀速“机械感”；cubic-bezier(.25,.46,.45,.94)更细腻，但非必需 -
forwards必须加，否则动画一停，transform就清零，元素“啪”地掉回去
元素得先隐藏，否则动画开始前就占位、可能被看见
如果元素默认可见，即使加了 translateY(100%)，它仍在文档流里占空间，且初始状态可能被用户瞥见——尤其网络慢或 CSS 加载延迟时。
正确做法是用 opacity: 0 + visibility: hidden 配合动画启动：
- 在元素上预设
opacity: 0; visibility: hidden; - 动画开始后（比如 JS 添加类），在
0%帧里同时设opacity: 0; transform: translateY(100%); visibility: visible; - 注意：不能只靠
opacity控制显隐，因为opacity: 0元素仍可点击/聚焦，visibility: hidden才真正“不可交互”
JS 触发动画时，要等重绘完成再加类，否则动画不触发
直接 el.classList.add('animate-in') 可能失败——浏览器还没来得及把元素渲染出来，CSS 动画就错过了“从无到有”的时机。
稳妥做法是用 requestAnimationFrame 或 setTimeout(..., 0) 延迟一帧：
el.classList.add('hidden'); // 先确保隐藏
setTimeout(() => {
el.classList.remove('hidden');
el.classList.add('animate-in');
}, 0);
更严谨的写法是监听 offsetHeight 或用 getComputedStyle 确认样式已应用，但对大多数场景，setTimeout(..., 0) 足够可靠。别用 DOMContentLoaded ——它只管 HTML 解析完，不管 CSS 是否就绪。
容易被忽略的是：动画类名一旦加上，就不能靠重复添加触发第二次动画；需要先移除再加，或用 animation-play-state 控制，但多数情况重置类更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
