CSS初级项目模态框动画如何实现_Opacity transition与显示隐藏过渡实践-css教程-PHP中文网

CSS初级项目模态框动画如何实现_Opacity transition与显示隐藏过渡实践

P粉602998670

发布： 2025-11-20 12:46:56

原创

429人浏览过

使用opacity与visibility配合transition实现模态框淡入淡出效果，通过JavaScript切换active类控制显示隐藏，确保动画平滑且兼容性好。

css初级项目模态框动画如何实现_opacity transition与显示隐藏过渡实践

实现一个带有淡入淡出（opacity transition）效果的模态框动画，核心在于结合 CSS 的 opacity 属性与 visibility 或 display 控制，再通过 transition 实现平滑过渡。下面是一个实用且结构清晰的实践方法。

1. 模态框基本结构

先搭建 HTML 结构，包含触发按钮、模态框容器、内容区域和关闭按钮：

<button id="openModal">打开模态框</button>

<div class="modal">
  <div class="modal-content">
    <span class="close">&times;</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');
  }
});

登录后复制