如何实现元素动画滑至屏幕底部后从DOM中移除

要实现点击按钮后元素先动画滑至屏幕底部并缩小，再从DOM移除，你可以通过CSS过渡（transition） + JavaScript监听过渡结束事件来完成，具体步骤如下：

1. 修改CSS样式，添加过渡与退场状态 #

先给.element补充过渡属性，再新增一个退场类定义动画最终状态：

.element {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 75vw;
  height: 60vh;
  border: 1px solid #eee;
  overflow: hidden;
  resize: both;
  /* 补充过渡属性，指定过渡的属性和时长 */
  transition: transform 1s linear;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 退场类：定义滑至底部+缩小的最终状态 */
.element-exit {
  /* 下移至屏幕底部之外，同时缩小至80% */
  transform: translate(-50%, 150%) scale(0.8);
}

• transition: transform 1s linear：指定transform属性的过渡时长为1秒，线性过渡，匹配你需要的"约1秒"动画时长。
• .element-exit的transform：把元素从原居中位置下移到屏幕底部之外，同时缩小尺寸，完成退场动画。

2. 修改JavaScript移除函数 #

修改close_window函数，先触发动画，等过渡结束后再移除元素：

function close_window(app) {
  // 添加退场类，触发CSS过渡动画
  app.classList.add('element-exit');
  
  // 监听过渡结束事件，动画完成后移除元素
  const handleTransitionEnd = () => {
    app.parentElement.removeChild(app);
    // 移除事件监听，避免内存泄漏
    app.removeEventListener('transitionend', handleTransitionEnd);
  };
  
  app.addEventListener('transitionend', handleTransitionEnd);
}

• 先添加element-exit类，CSS会自动执行从初始状态到退场状态的过渡动画。
• 监听transitionend事件，确保动画完全结束后再移除DOM元素，避免动画被中断。
• 移除事件监听是为了防止元素被移除后仍保留无用的监听函数，造成内存浪费。

可选优化 #

如果元素有多个过渡属性，可在transitionend事件里判断event.propertyName是否为transform，确保只在目标动画结束后执行移除操作：

const handleTransitionEnd = (event) => {
  if (event.propertyName === 'transform') {
    app.parentElement.removeChild(app);
    app.removeEventListener('transitionend', handleTransitionEnd);
  }
};

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