必须同时用@keyframes控制opacity和transform才能实现自然过渡：起始帧设opacity:0+scale(0.95)，结束帧设opacity:1+scale(1)；隐藏需用反向动画+animationend监听后移除类或设display:none，且须用class切换而非直接改style。
用 @keyframes 同时控制 opacity 和 transform
只改 opacity 会闪、只改 transform 会占位，必须两者配合才能实现「淡入+缩放/位移」的自然过渡。关键点是：起始帧设 opacity: 0 + transform: scale(0.95)（或 translateY(10px)），结束帧设 opacity: 1 + transform: scale(1)（或 translateY(0)）。
示例动画定义：
@keyframes modal-fade-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
隐藏时也要定义反向动画，不能只靠 display: none
display: none 会让元素瞬间消失，动画直接中断。正确做法是：先触发隐藏动画（比如 modal-fade-out），动画结束后再通过 JS 移除类或设置 display: none。
- 动画结束事件监听用
animationend，注意兼容性（webkitAnimationEnd在旧 Safari 中需要） - 不要在 CSS 里给隐藏状态写
display: none—— 它和动画不共存 - 过渡时间需和动画时长一致，例如动画 0.2s，则 JS 延迟
200ms后再设display: none
触发动画要靠 class 切换，不是直接改 style
直接操作 element.style.opacity 或 element.style.transform 会覆盖 CSS 动画，且无法触发 animationend。必须用 class 控制：
- 显示弹窗：添加
modal--show类，该类绑定animation: modal-fade-in 0.2s ease - 隐藏弹窗：添加
modal--hide类，绑定animation: modal-fade-out 0.2s ease - 确保两个 class 不同时存在，避免动画冲突
注意 transform 的硬件加速和回流问题
transform 本身是合成层属性，但若父容器有 will-change: transform 或 transform: translateZ(0)，可能提前创建图层，影响性能。实际中：
- 对弹窗自身加
transform: translateZ(0)有助于平滑动画（尤其在移动端） - 避免在动画过程中读取
offsetTop、getBoundingClientRect()等触发同步布局计算 - 如果弹窗内有大量滚动内容，动画期间禁止用户滚动，否则容易卡顿
动画真正生效的临界点，往往卡在「类名添加时机」和「display 切换时机」之间。这两个时间点错开 1ms，就可能看不到过渡效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
