display: none 无法触发 transition 动画，因其为非连续属性；应改用 visibility、opacity 和 transform 等可动画属性配合 class 切换实现稳定过渡。
transition 为什么对 display: none 元素无效
直接给 display: none 的元素加 transition 不会触发任何动画——因为该属性是「非连续性」的，浏览器无法插值。常见表现是：点击后弹层瞬间出现/消失，过渡失效。
解决思路是把「显隐控制」和「动画控制」拆开：
– 显隐用 visibility 或 opacity + pointer-events
– 过渡用 transform 和 opacity 等可动画属性
- 避免在切换时同时设置
display: none和opacity: 0 - 初始状态建议设为
visibility: hidden; opacity: 0; transform: scale(0.95); - 显示时只改
visibility: visible并加 class 触发 transition，不要靠 JS 动态写 style
用 class 切换实现 modal 过渡（纯 CSS 方案）
核心是用一个 class 控制过渡起始态，配合 transition 属性声明动画行为。不依赖 JS 操作内联样式，更稳定、易维护。
.modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
visibility: hidden;
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.modal.active {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
-
.active类由 JS 在点击时添加/移除，不操作display - 过渡时间统一写在基础类里，避免在 active 中重复声明
- 如果需要缩放入场，把
transform换成scale(0.9)→scale(1)即可
JS 控制时机：transitionend 而非 setTimeout
关闭弹层后想清理 DOM 或重置状态？别用 setTimeout 硬等 250ms——不同设备、CSS 变更都可能导致实际动画时长偏差。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
监听 transitionend 事件才是可靠方式，且需过滤掉不需要的属性（比如 opacity 完了但 transform 还没完）：
modalEl.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && !modalEl.classList.contains('active')) {
modalEl.remove(); // 或 reset 表单等
}
});
- 必须检查
e.propertyName，否则 transform 和 opacity 都会触发两次 - 只在移除阶段处理清理逻辑；显示阶段一般无需监听，class 加完就可认为“已就绪”
- 注意 Safari 旧版本可能触发
webkitTransitionEnd，如需兼容可加一层 fallback
移动端点击穿透与 backdrop-filter 兼容性
在 iOS Safari 上，如果弹层带 backdrop-filter: blur(8px)，又没处理好 pointer-events，可能出现点击穿透到下层内容的问题。
- 确保遮罩层（
.modal）有pointer-events: auto，内容区也别漏设 -
backdrop-filter在部分 Android WebView 和老版 Chrome 中不支持，可用@supports (backdrop-filter: blur(1px))包裹增强样式 - 如果弹层内有输入框，iOS 下 focus 后键盘弹出可能挤压布局，建议加
viewport-fit=cover并监听resize微调
过渡效果本身很简单，难的是在各种边界场景下保持行为一致——尤其是 display 切换的惯性思维、transitionend 的精准捕获、以及移动端渲染差异带来的意外表现。
