transition需同时声明opacity和transform并设相同时间，初始/目标状态显式定义，用class切换控制显示隐藏，避免display:none和JS直接改style，监听transitionend事件确保动画完成后再清理状态。
transition 同时控制 opacity 和 transform
弹窗的淡入淡出 + 上下滑动（或缩放）效果，本质是让 opacity 和 transform 两个属性同步过渡。关键在于：这两个属性都必须写进同一个 transition 声明里，且初始/目标状态需显式定义（不能依赖浏览器默认值）。
- 只写
transition: opacity 0.3s，transform不会动；反之亦然 - 必须给弹窗元素设置
opacity: 0和transform: translateY(20px)等“隐藏态”，再通过 class 切换激活 - 推荐用
transform: translateY(-10px)或scale(0.95)配合opacity: 0，避免布局抖动
弹窗显示/隐藏 class 的典型写法
用一个 class 控制“显示中”状态，CSS 中定义两套样式：隐藏态（默认）和显示态（带 transition）。不要依赖 JS 动态改 style，而是切换 class。
.modal {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.modal.is-active {
opacity: 1;
transform: translateY(0);
}
-
is-active是常见命名，也可用show、open，保持语义清晰 - 两个 transition 时间必须一致，否则会出现“先显后移”或“移完再显”的割裂感
- 别用
display: none切换——它无法过渡；改用visibility: hidden+opacity组合
JS 触发时注意 timing 和事件时机
JS 控制 class 切换后，过渡立即开始；但若在 modal 上绑定了点击关闭，要防止快速连点导致 is-active 被反复增删，打断过渡动画。
- 添加 class 后，不要立刻 remove；等
transitionend事件触发后再清理状态（尤其隐藏时） - 监听
transitionend时，检查event.propertyName是否为opacity或transform，避免误响应其他过渡 - 移动端需加
will-change: opacity, transform提升渲染性能（尤其 iOS Safari）
兼容性与 fallback 处理
IE10+ 支持 transform 和 opacity 过渡，但 IE10 不支持 transform 的部分函数（如 scaleZ）。实际项目中，只要不用 3D 变换，主流写法完全安全。
立即学习“前端免费学习笔记（深入）”；
- 不推荐为老 IE 单独写滤镜（
filter: alpha(opacity=0)），维护成本高且行为不一致 - 如果需要 SSR 或首屏不可见，建议初始 HTML 就不渲染弹窗 DOM，而用 JS 动态
appendChild，避免空占位 - 动画时间别设太长（>0.4s），用户感知延迟明显；也别太短（
transitionend，什么时候该直接操作 DOM；还有就是 modal 内部 focus 管理、Esc 关闭、遮罩层点击穿透这些，和透明度位移本身无关，但一并出现时容易互相干扰。 
