CSS弹窗动画：opacity与transform技巧

  

  

    
弹窗标题
    
这里是弹窗内容。
    关闭
  

打开弹窗

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* 初始不响应事件 */
  opacity: 0;
}
.modal.active {
pointer-events: auto;
opacity: 1;
}
.modal-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.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;
/ 添加过渡效果 /
transition: transform 0.3s ease-out;
}
.modal.active .modal-content {
transform: translate(-50%, -50%) scale(1);
}

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

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