CSS与JavaScript实现平滑过渡动画弹出框教程

<div class="popup">
  <div class="popup-container">
    <h1>标题</h1>
    <p>信息：邮箱：<a class="__cf_email__" data-cfemail="453635202b2620372d242936312024217772052228242c296b262a28" href="/cdn-cgi/l/email-protection">[email protected]</a> 电话：073 814 8752</p>
    <div class="popup-close">&times;</div>
  </div>
</div>

<button id="open-popup">打开弹出框</button>

* {
  margin:0;
  padding:0; /* 增加padding:0以确保更一致的初始状态 */
  box-sizing: border-box; /* 推荐使用box-sizing */
}
body {
  font-family: "Raleway", sans-serif; /* 确保字体设置 */
}

/* 弹出框的初始隐藏状态 */
.popup {
  position:fixed;
  top:-100vh; /* 初始时将弹出框置于屏幕上方之外 */
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5); /* 半透明黑色背景 */
  /* 当弹出框隐藏时，等待900ms后top属性才瞬间改变，给内容容器的退出动画留足时间 */
  transition:top 0ms ease-in-out 900ms;
  z-index: 1000; /* 确保弹出框在其他内容之上 */
}

/* 弹出框的活动显示状态 */
.popup.active {
  top:0vh; /* 弹出框瞬间移动到屏幕顶部，覆盖整个视口 */
  /* 当弹出框显示时，top属性瞬间改变，没有延迟 */
  transition:top 0ms ease-in-out;
}

/* 弹出框内容容器的初始隐藏状态及动画 */
.popup .popup-container {
  position:absolute;
  top:50%;
  left:50%;
  /* 初始时放大1.2倍并半透明，制造从大到小、从模糊到清晰的动画效果 */
  transform:translate(-50%,-50%) scale(1.2);
  width:400px;
  padding:30px 20px 20px;
  background:#eee;
  opacity:0.5;
  /* 所有属性在900ms内平滑过渡 */
  transition:all 900ms ease-in-out;
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 添加阴影 */
}

/* 弹出框内容容器的活动显示状态 */
.popup.active .popup-container {
  opacity:1; /* 完全不透明 */
  transform:translate(-50%,-50%) scale(1); /* 恢复到原始大小 */
}

/* 关闭按钮样式 */
.popup .popup-container .popup-close {
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  background:#111;
  text-align:center;
  line-height:30px;
  color:#eee;
  border-radius:50%;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
  transition: background 0.3s ease; /* 添加悬停过渡效果 */
}
.popup .popup-container .popup-close:hover {
  background: #333; /* 悬停背景色 */
}

/* 标题和段落样式 */
.popup .popup-container h1 {
  text-align:center;
  font-size:30px;
  color:#222;
  margin-bottom: 15px;
}
.popup .popup-container p {
  margin-top:10px;
  font-size:15px;
  color:#555;
  line-height: 1.5;
}
.popup .popup-container p a {
  color: #007bff;
  text-decoration: none;
}
.popup .popup-container p a:hover {
  text-decoration: underline;
}

document.addEventListener("DOMContentLoaded", function() {
  const openPopupButton = document.querySelector("#open-popup");
  const popupElement = document.querySelector(".popup");
  const closePopupButton = document.querySelector(".popup .popup-container .popup-close");

  // 打开弹出框
  if (openPopupButton) {
    openPopupButton.addEventListener("click", function() {
      popupElement.classList.add("active");
    });
  }

  // 关闭弹出框
  if (closePopupButton) {
    closePopupButton.addEventListener("click", function() {
      popupElement.classList.remove("active");
    });
  }

  // 点击弹出框外部区域关闭（可选）
  if (popupElement) {
    popupElement.addEventListener("click", function(event) {
      if (event.target === popupElement) { // 确保点击的是背景而不是内容
        popupElement.classList.remove("active");
      }
    });
  }
});