使用opacity和visibility配合transform实现流畅弹窗动画，避免display硬切换。通过transition控制透明度与位移，采用cubic-bezier曲线优化缓动效果，提升视觉质感。优先使用GPU加速属性减少重排，结合:focus-within增强交互，确保动画自然且高性能。
使用 CSS transition 优化弹窗显示动画，关键在于避免生硬的出现或消失，让弹窗的显示和隐藏更自然流畅。通过合理设置过渡属性、配合透明度、位移或缩放等样式变化，可以显著提升用户体验。
使用 opacity 和 visibility 控制显隐状态
直接使用 display: none/block 会导致无法触发过渡动画，因为 display 不是可过渡属性。推荐结合 opacity 实现淡入淡出，并用 visibility 配合控制实际占位。
示例：.popup {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup.show {
opacity: 1;
visibility: visible;
}
这样在 .show 类添加时，弹窗会平滑淡入，移除时淡出后再隐藏，避免内容突然闪现。
结合 transform 实现位移动画
仅靠透明度变化略显单调。加入 transform 可以实现从顶部下滑、居中放大等效果，视觉层次更丰富。
立即学习“前端免费学习笔记（深入）”；
常见做法：- 初始状态：opacity: 0; transform: scale(0.8) translateY(-10px);
- 显示状态：opacity: 1; transform: scale(1) translateY(0);
- transition 设置：transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
cubic-bezier 曲线能让动画起始柔和、结束利落，比 linear 或 ease 更有质感。
避免布局重排，提升动画性能
transition 应尽量作用于不触发重排（reflow）的属性，如 opacity 和 transform。它们由合成层处理，GPU 加速，动画更流畅。
应避免对以下属性做过渡：- height / width —— 引发尺寸重算
- margin / padding —— 触发布局变化
- left / top（非定位上下文）—— 可能造成卡顿
若需高度展开动画，可考虑 max-height 过渡（如从 0 到 500px），但需注意其局限性。
配合 :focus-within 增强交互体验
对于可交互弹窗（如表单），可利用 :focus-within 在用户聚焦内部元素时保持显示，防止误关闭。
同时，在 JavaScript 控制类名切换时，确保 transition 能正确触发。必要时可用 setTimeout 分离样式变化步骤，避免浏览器合并渲染。
基本上就这些。合理运用 opacity、transform 和 transition 的组合，就能让弹窗动画既美观又高效。关键是避免 display 的硬切换，选择高性能的动画属性，并控制好过渡节奏。不复杂但容易忽略细节。
