使用opacity与visibility配合transition实现模态框淡入淡出效果，通过JavaScript切换active类控制显示隐藏，确保动画平滑且兼容性好。
实现一个带有淡入淡出（opacity transition）效果的模态框动画，核心在于结合 CSS 的 opacity 属性与 visibility 或 display 控制，再通过 transition 实现平滑过渡。下面是一个实用且结构清晰的实践方法。
1. 模态框基本结构
先搭建 HTML 结构，包含触发按钮、模态框容器、内容区域和关闭按钮：
<button id="openModal">打开模态框</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>这是模态框标题</h2>
<p>这里是模态框内容。</p>
</div>
</div>
2. 使用 opacity + visibility 实现平滑过渡
直接使用 display: none/block 无法触发动画，因为 display 不是可过渡属性。推荐用 opacity 控制透明度，配合 visibility 控制是否可交互。
CSS 样式如下：
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 300px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.close {
float: right;
font-size: 24px;
cursor: pointer;
color: #aaa;
}
3. JavaScript 控制显示与隐藏
通过 JS 切换 active 类来触发动画：
const modal = document.querySelector('.modal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.querySelector('.close');
openBtn.addEventListener('click', () => {
modal.classList.add('active');
});
closeBtn.addEventListener('click', () => {
modal.classList.remove('active');
});
// 点击遮罩层也可关闭
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.classList.remove('active');
}
});
4. 关键点说明
- opacity 过渡：让模态框从透明到不透明，实现淡入效果。
- visibility 配合：确保在 opacity 为 0 时不可点击或聚焦（比 display 更适合过渡）。
- transition 定义在默认状态：这样进入和退出都有动画。
- 避免使用 display: none：它会跳过所有过渡，导致动画失效。
基本上就这些。opacity + visibility + transition 是最稳定且兼容性好的做法，适用于大多数初级到中级项目中的模态框动画需求。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
