JavaScript中HTML5元素移除时的消失动画实现问题

我有一个按钮，点击可切换矩形元素"home_card"的显示与隐藏：点击一次显示"home_card"，再次点击隐藏。显示动画可正常运行，但移除元素时的消失动画无法实现。我尝试在"home_card"上绑定transitionend事件监听器，待动画结束后再移除元素，但操作存在问题。请帮忙排查错误并指导实现方法。

用户原始代码 #

JavaScript

function card_AppearsHome() { 
  if (transition_counter == 1){ 
    // HOW CAN I INSERT A "DISAPPEARING TRANSITION" before removing the element? 
    // I know you can use an eventlistener for the "ontransitionend" event, but not how you can do it.. 
    document.getElementById("white_background_top").removeChild(home_card); 
    transition_counter = 0; 
  } else { 
    //card/ div is created and appears, need to select a tranform: transition method 
    home_card = document.createElement('div'); 
    home_card.id = "home_card"; 
    home_card.className = "homecard_appear" 
    document.getElementById("white_background_top").appendChild(home_card); 
    transition_counter = 1; 
  } 
}

CSS

/* card appearing effect */
.homecard_appear{
 animation-name: card_app_anim;
 animation-duration: 4s;
}
/* standard transition */
@keyframes card_app_anim {
 from {left: 54vw;}
 to {left: 94vw;}
}
/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_app_anim {
 from {left: 54vw;}
 to {left: 94vw;}
}

/* card disappearing effect */
.homecard_dissappear{
 animation-name: card_dis_anim;
 animation-duration: 4s;
}
/* standard transition */
@keyframes card_dis_anim {
 from {left: 94vw;}
 to {left: 54vw;}
}
/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_dis_anim {
 from {left: 94vw;}
 to {left: 54vw;}
}

问题分析 #

你遇到的核心问题有三个：

1. 混淆动画事件类型：你用的是CSS @keyframes 帧动画，对应的结束事件是animationend，而不是transitionend（后者仅适用于CSS transition 属性）。
2. 逻辑顺序错误：当前代码直接移除元素，根本没给消失动画执行的机会——元素被移除后就脱离DOM，自然不会播放动画。
3. 不必要的DOM操作：每次切换都创建/删除元素，不仅浪费性能，还会丢失元素的状态信息，复用现有元素更合理。

修复方案 #

我们通过复用DOM元素+切换CSS类触发动画+监听animationend延迟隐藏来解决问题，具体实现如下：

1. 调整CSS（添加默认隐藏状态与定位）

给元素添加默认隐藏类，同时确保元素支持left属性定位（动画依赖该属性）：

/* 默认隐藏状态 */
.home_card.hidden {
  display: none;
}

/* 基础样式：确保left属性生效 */
.home_card {
  position: absolute;
  width: 200px;
  height: 300px;
  background: #fff;
}

/* card appearing effect */
.homecard_appear{
 animation-name: card_app_anim;
 animation-duration: 4s;
}
@keyframes card_app_anim {
 from {left: 54vw;}
 to {left: 94vw;}
}
@-webkit-keyframes card_app_anim {
 from {left: 54vw;}
 to {left: 94vw;}
}

/* card disappearing effect */
.homecard_disappear{
 animation-name: card_dis_anim;
 animation-duration: 4s;
}
@keyframes card_dis_anim {
 from {left: 94vw;}
 to {left: 54vw;}
}
@-webkit-keyframes card_dis_anim {
 from {left: 94vw;}
 to {left: 54vw;}
}

2. 重构JavaScript逻辑

• 页面加载时就创建home_card并添加到DOM，默认隐藏
• 点击按钮时切换状态：显示时移除隐藏类并添加显示动画；隐藏时添加消失动画，监听animationend事件，动画结束后再隐藏元素
• 移除事件监听器避免重复触发

// 状态变量（可根据需求封装为闭包/模块）
let transition_counter = 0;
let home_card;

// 初始化函数：页面加载完成后执行
function initHomeCard() {
  home_card = document.createElement('div');
  home_card.id = "home_card";
  home_card.className = "home_card hidden"; // 默认隐藏
  document.getElementById("white_background_top").appendChild(home_card);
}

// 按钮点击处理函数
function card_AppearsHome() {
  if (transition_counter === 1) {
    // 隐藏逻辑：先触发消失动画
    home_card.classList.remove('homecard_appear');
    home_card.classList.add('homecard_disappear');
    
    // 监听动画结束事件
    const handleAnimationEnd = () => {
      home_card.classList.add('hidden'); // 动画结束后隐藏元素
      home_card.classList.remove('homecard_disappear'); // 清除动画类
      home_card.removeEventListener('animationend', handleAnimationEnd); // 移除监听器
      transition_counter = 0; // 更新状态
    };
    
    home_card.addEventListener('animationend', handleAnimationEnd);
  } else {
    // 显示逻辑：移除隐藏类并触发显示动画
    home_card.classList.remove('hidden');
    home_card.classList.add('homecard_appear');
    transition_counter = 1; // 更新状态
  }
}

// 页面加载完成后初始化元素
window.addEventListener('load', initHomeCard);

3. 关键细节说明

• 复用元素：避免频繁创建/删除DOM，提升性能和状态稳定性
• 事件清理：必须移除animationend监听器，否则下次触发动画会绑定多个相同事件，导致逻辑混乱
• 类切换顺序：切换动画类时先移除旧类，再添加新类，避免动画冲突
• 定位属性：必须给元素设置position: absolute/relative/fixed，否则left属性不会生效

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