如何调整模态弹窗的开合速度并实现关闭动画？

我来帮你搞定这两个动画问题！你之前尝试的transitions: opacity 1.5s linear没生效，大概率是因为弹窗的滑入效果是靠transform属性实现的，而不是仅靠opacity，我们需要调整CSS过渡属性，同时修改关闭弹窗的逻辑来触发滑出动画。

步骤1：调整滑入动画的速度 #

首先，找到控制弹窗位置和过渡的CSS代码，确保过渡属性包含transform（这是实现上下滑动的关键），并设置合适的时长（比如0.5s，你可以根据需求调整得更慢）：

.modal {
  /* 保留你原有其他样式，如下方定位、宽高、背景等 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%); /* 初始状态在视口外底部 */
  transition: transform 0.5s ease, opacity 0.5s ease; /* 同时过渡transform和opacity */
  opacity: 0;
  visibility: hidden;
}

.modal.open {
  transform: translateY(0); /* 滑入到视口内 */
  opacity: 1;
  visibility: visible;
}

这里把过渡时长设为0.5s，你可以改成1s甚至更久来减慢滑入速度，ease曲线会让动画的启停更自然。

步骤2：实现关闭时的向下滑出动画 #

关闭弹窗时不能直接设置display: none，这样会直接中断动画。我们需要先让弹窗执行滑出的过渡动画，等动画结束后再隐藏它。修改你的JavaScript关闭逻辑：

// 假设你的关闭按钮类名为.close-modal
document.querySelector('.close-modal').addEventListener('click', function() {
  const modal = document.querySelector('.modal');
  // 移除open类，触发滑出动画
  modal.classList.remove('open');
  
  // 监听过渡结束事件，动画完成后再隐藏弹窗
  modal.addEventListener('transitionend', function handler() {
    modal.style.display = 'none';
    // 移除事件监听，避免后续重复触发
    modal.removeEventListener('transitionend', handler);
  }, { once: true });
});

注意：弹窗的初始状态要设置为display: block（或其他可见的display值），只在动画结束后才改为none。

为什么你之前的尝试没生效？ #

你之前只设置了opacity的过渡，但弹窗的滑动效果是靠transform: translateY()实现的，所以必须把transform加入过渡属性列表，才能让滑动过程产生动画。另外关闭时直接隐藏元素会强制终止过渡动画，所以必须等待动画完全结束后再隐藏弹窗。

这样修改后，弹窗打开时会以你设置的速度从底部滑入，关闭时会以相同速度向下滑出后消失，完美解决你的两个问题！

内容的提问来源于stack exchange，提问作者OM The Eternity