使用CSS过渡提升弹窗体验，通过opacity和transform实现淡入滑入效果，配合visibility与transitionend事件控制显隐时机，避免直接过渡display属性。
在弹窗组件的显示与隐藏过程中，使用 CSS 过渡（transition）可以显著提升用户体验，让界面变化更自然流畅。直接的显隐切换会显得生硬，而通过合理的过渡效果，可以让弹窗“渐现”或“滑入”，增强交互的亲和力。
1. 使用 opacity 和 transform 实现平滑过渡
最常见的做法是结合 opacity（控制透明度）和 transform（控制位移或缩放）来实现视觉上的淡入淡出或滑动入场效果。
示例：
.modal {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.modal.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
这里，visibility 控制元素是否可被渲染，避免在不可见时仍响应交互；transition 定义了所有属性在 0.3 秒内以缓动方式变化。当添加 .show 类时，弹窗平滑出现。
立即学习“前端免费学习笔记（深入）”；
2. 配合 display 使用的注意事项
display: none 会立即从文档流中移除元素，无法触发过渡。因此不能直接对 display 属性做 transition。解决方案是：
- 用 visibility 控制显隐，配合 opacity 做视觉过渡
- 在 transition 结束后，再通过 JavaScript 切换 display 的值
例如，在隐藏动画开始前保持 display: block，监听 transitionend 事件后再设置 display: none。
3. 使用 class 切换控制状态
推荐通过 JavaScript 动态添加或移除类名来触发动画，而不是直接操作 style。这样样式与行为分离，更易于维护。
JavaScript 示例：
const modal = document.querySelector('.modal');
// 显示
modal.classList.add('show');
// 隐藏
modal.classList.remove('show');
也可以封装成函数，统一处理显示/隐藏逻辑，并绑定 transitionend 事件清理状态。
4. 选择合适的 timing function
CSS 的 ease 是默认缓动，但针对弹窗，可以尝试更生动的曲线：
- ease-in：缓慢进入，适合强调出现
- ease-out：快速开始，缓慢结束，适合自然消失
- cubic-bezier(0.18, 0.89, 0.32, 1.28)：模拟轻微弹跳感，增加活力
根据产品风格选择合适的动画节奏，避免过度夸张影响可用性。
基本上就这些。合理使用 CSS transition，能让弹窗组件的交互更细腻，关键在于控制好显隐逻辑、选择恰当的动画属性和时机。不复杂但容易忽略细节。
