添加/移除active类时Modal的scale属性无transition过渡效果

核心问题分析 #

你的代码存在两个关键问题导致过渡动画失效：

1. JavaScript forEach语法错误 #

forEach方法的回调函数参数格式错误，多了一个逗号，导致整个事件监听逻辑无法执行，类切换的代码根本没被触发。

2. 初始DOM状态不符合预期 #

HTML中.popup默认带有active类，导致初始状态就是放大状态，首次关闭时的动画逻辑和预期不符。

修正后的代码 #

JavaScript（修复语法错误） #

const openPopupButtons = document.querySelectorAll('[data-popup-target]');
const closePopupButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

// 修复forEach的参数格式
openPopupButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const popup = document.querySelector(button.dataset.popupTarget)
    openPopup(popup)
  })
})

// 同样修复这里的forEach格式
closePopupButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const popup = button.closest('.popup')
    closePopup(popup)
  })
})

function openPopup(popup) {
  if (popup == null) return
  popup.classList.add('active')
  overlay.classList.add('active')
}

function closePopup(popup) {
  if (popup == null) return
  popup.classList.remove('active')
  overlay.classList.remove('active')
}

HTML（移除默认的active类） #

<body>
  <button data-popup-target="#popup" class="open-popup">Open Pop-up</button>
  <!-- 移除默认的active类，让Modal初始为缩小状态 -->
  <div class="popup" id="popup">
    <header class="popup-header">
      <div class="title"> Insert Text </div>
      <button data-close-button class="close-popup"> &times; </button>
    </header>
    <div class="popup-body">
      <textarea name="post-it" id="post-it" cols="30" rows="10" class="post-it"></textarea>
    </div>
    <footer class="popup-footer">
      <button class="create-button"> Create </button>
    </footer>
  </div>
  <div class="" id="overlay"></div>
</body>

CSS（无需修改，你的过渡配置是正确的） #

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.75);
  transition: 1s ease-in-out;
  border: 10px double #fff8fb;
  border-radius: 1em;
  padding: 0 1em;
  background-color: #fcdce9;
  width: 600px;
  max-width: 80%;
  z-index: 10;
}

.popup.active {
  transform: translate(-50%, -50%) scale(1);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25rem .5rem;
}

.popup-header .title {
  font-size: 24px;
  font-weight: bold;
}

.popup-header .close-popup {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  font-size: 24px;
  font-weight: bold;
}

.post-it {
  border: none;
  border-radius: 1em;
  width: 100%;
  padding: 10px 15px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16;
}

.popup-footer {
  padding: .5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.create-button {
  border: 3px solid #fff8fb;
  border-radius: 1em;
  background: none;
  outline: none;
  font-size: 18px;
  font-weight: bold;
  padding: 2.5px 20px;
  cursor: pointer;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 500ms ease-in-out;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

验证逻辑 #

修复后，点击打开按钮时，.popup和#overlay会添加active类，触发缩放和淡入动画；点击关闭按钮或遮罩时，移除active类，触发缩小和淡出动画，完全符合预期。

内容的提问来源于stack exchange，提问作者Alen Valdez Siller