HTML5 中怎么通过 transition 属性实现淡入淡出的弹窗效果-H5教程-PHP中文网

用 opacity + visibility + transition 实现弹窗淡入淡出：默认 opacity: 0、visibility: hidden 并声明两者过渡；显示时设 opacity: 1、visibility: visible；JS 通过 classList 切换状态，关闭后在 transitionend 中检测 opacity 为 0 再移除 DOM。

html5 中怎么通过 transition 属性实现淡入淡出的弹窗效果

用 opacity + transition 实现弹窗淡入淡出，核心是让透明度平滑变化，同时避免布局跳动和交互干扰。不能靠 display: none 或仅用 opacity，必须搭配 visibility 控制可访问性与占位行为。

基础结构：类名控制显隐状态

弹窗容器默认设为不可见但保留渲染上下文：

初始状态（如 .modal）写 opacity: 0; visibility: hidden;
过渡声明必须写在默认状态里：transition: opacity 0.3s ease, visibility 0.3s;
显示状态（如 .modal.show）设 opacity: 1; visibility: visible;

为什么 visibility 必须和 opacity 一起过渡

只改 opacity 会让元素“看不见但点得着”——仍占文档流、能被聚焦、读屏器可读；只改 visibility 又没有渐变效果。两者同步过渡才能兼顾视觉、交互与无障碍：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

visibility 的过渡虽不支持中间值，但配合 opacity 可实现“先淡出再隐藏”或“先显示再淡入”的合理时序
浏览器对 visibility 的过渡会做“离散值软化处理”，0.3s 内完成切换，不会突兀
不写 visibility 在 transition 列表里，它会立刻生效，破坏动画连贯性

JS 触发时的关键细节

用 JavaScript 控制类名切换最稳妥，避免直接操作 style.opacity：

打开弹窗：先确保容器已挂载 DOM，再执行 modal.classList.add('show')
关闭弹窗：用 modal.classList.remove('show')，不要用 setTimeout 延迟移除类名
若需关闭后彻底移除 DOM，应在 transitionend 事件中判断 event.propertyName === 'opacity' 且 getComputedStyle(modal).opacity === '0' 再调用 remove()