CSS弹窗动画：opacity与transform技巧

<div class="modal" id="myModal">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <h3>弹窗标题</h3>
    <p>这里是弹窗内容。</p>
    <button onclick="hideModal()">关闭</button>
  </div>
</div>
<button onclick="showModal()">打开弹窗</button>

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* 初始不响应事件 */
  opacity: 0;
}
<p>.modal.active {
pointer-events: auto;
opacity: 1;
}</p><p>.modal-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}</p><p>.modal-content {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
min-width: 300px;
/<em> 添加过渡效果 </em>/
transition: transform 0.3s ease-out;
}</p><p>.modal.active .modal-content {
transform: translate(-50%, -50%) scale(1);
}</p>

function showModal() {
  document.getElementById('myModal').classList.add('active');
}
<p>function hideModal() {
document.getElementById('myModal').classList.remove('active');
}</p>

const modal = document.getElementById('myModal');
<p>modal.addEventListener('transitionend', function(e) {
if (!modal.classList.contains('active') && e.propertyName === 'opacity') {
// 动画完成后真正隐藏（可选）
modal.style.display = 'none';
}
});</p>