使用JS Promises实现display none状态元素的动画效果

嘿，这个问题我太熟了——display: none和CSS动画天生不对付！我之前复刻Bootstrap模态框的时候也踩过这个坑，给你捋捋怎么解决：

当元素设置为display: none时，浏览器不会渲染它的任何状态，所以你给它加的transition或者animation根本不会触发——因为从“不存在”到“存在”没有中间状态可言。Bootstrap的模态框其实也不是直接用display: none来控制显示隐藏的，而是结合了多个属性来模拟。

核心思路是：用视觉上等价于display: none的初始状态替代真正的display: none，让元素保留可触发动画的基础，再通过JavaScript控制状态切换的时机。

1. 初始状态模拟display: none
   不用display: none，而是用visibility: hidden + opacity: 0 + 可选的height: 0/overflow: hidden，同时加上transition过渡效果。这样元素在DOM里，但完全不可见也不占空间，视觉上和display: none一致，但保留了可触发动画的能力。

2. 打开模态框的逻辑

   • 点击按钮时，先让元素的display变为block（或布局需要的flex），让浏览器开始渲染它。
   • 立即添加一个激活类，把visibility设为visible，opacity设为1，同时恢复元素的高度/尺寸，触发平滑的淡入+缩放动画。

3. 关闭模态框的逻辑

   • 点击关闭按钮或模态框背景时，先移除激活类，让元素执行淡出+缩小的过渡动画。
   • 监听元素的transitionend事件，等动画完全结束后，再把display设为none，让元素彻底不占空间。

HTML #

<!-- 触发按钮 -->
<button id="openModal">打开模态框</button>

<!-- 模态框容器 -->
<div class="modal" id="modal">
  <div class="modal-content">
    <button class="close-btn" id="closeModal">×</button>
    <p>这是复刻Bootstrap风格的模态框！</p>
  </div>
</div>

CSS #

.modal {
  /* 初始状态：模拟display:none */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  /* 过渡动画：针对背景的透明度和可见性 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  opacity: 0;
}

.modal.active {
  /* 显示状态：触发动画 */
  display: block;
  visibility: visible;
  opacity: 1;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  /* 给内容加缩放动画，更贴近Bootstrap的效果 */
  transition: transform 0.3s ease;
}

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

.close-btn {
  float: right;
  font-size: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #000;
}

JavaScript #

const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

// 打开模态框
openBtn.addEventListener('click', () => {
  modal.classList.add('active');
});

// 关闭模态框的通用函数
function closeModal() {
  modal.classList.remove('active');
  // 监听过渡结束事件，动画完成后再隐藏display
  modal.addEventListener('transitionend', function handler(e) {
    // 只监听opacity的过渡结束，避免多个属性触发多次回调
    if (e.propertyName === 'opacity') {
      modal.style.display = 'none';
      // 移除事件监听，防止下次触发重复执行
      modal.removeEventListener('transitionend', handler);
    }
  });
}

// 关闭按钮点击事件
closeBtn.addEventListener('click', closeModal);

// 点击模态框背景也关闭
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    closeModal();
  }
});

• 避免直接切换display: none：一定要用opacity、visibility、transform这类支持过渡的属性实现动画，display只在动画前后切换。
• 处理transitionend重复触发：因为多个属性同时过渡时，transitionend会触发多次，所以要通过propertyName判断，确保只执行一次隐藏逻辑。
• 动画不触发的补救：如果发现添加激活类后动画没生效，可以把添加类的代码放在requestAnimationFrame里，确保浏览器先完成display: block的重绘：

  openBtn.addEventListener('click', () => {
    modal.style.display = 'block';
    requestAnimationFrame(() => {
      modal.classList.add('active');
    });
  });
  

内容的提问来源于stack exchange，提问作者Faiz