如何为文字冒险游戏选项添加点击触发的淡出动画？

问题背景 #

制作文字冒险游戏时，需要实现点击选项按钮后缓慢淡出的效果。尝试用hover的transition: all 1s ease-out无法满足点击触发需求，修改selectOption函数频繁报错，且担心改动现有类逻辑会破坏游戏运行。

解决方案 #

通过添加CSS过渡类+延迟执行选项逻辑的方式，无需改动核心游戏逻辑即可实现需求：

1. 添加CSS淡出样式

在样式表中新增专门的淡出动画类，保留原有按钮样式的同时定义过渡效果：

/* 保留你的.button基础样式 */
.button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 基础过渡属性，确保动画平滑 */
  transition: all 1s ease-out;
}

/* 点击触发的淡出类 */
.button.fade-out {
  opacity: 0;
  transform: translateY(15px); /* 可选：添加向下位移增强视觉效果 */
  pointer-events: none; /* 避免动画过程中重复点击 */
}

2. 修改按钮点击事件逻辑

在创建按钮的showTextNode函数中，调整点击事件处理逻辑，先触发动画再执行选项切换：

textNode.options.forEach(option => {
  if (showOption(option)) {
    const button = document.createElement('button')
    button.innerText = option.text
    button.classList.add('button')
    
    // 修改点击事件：先播放动画，再执行选项逻辑
    button.addEventListener('click', (e) => {
      const clickedBtn = e.target;
      // 添加淡出类触发动画
      clickedBtn.classList.add('fade-out');
      
      // 监听过渡结束事件，确保动画完成后再切换内容
      const onTransitionEnd = () => {
        clickedBtn.removeEventListener('transitionend', onTransitionEnd);
        selectOption(option);
      };
      
      clickedBtn.addEventListener('transitionend', onTransitionEnd);
    })
    
    optionButtonsElement.appendChild(button)
  }
})

3. 方案原理

原有逻辑中selectOption会立刻调用showTextNode删除所有按钮并渲染新内容，导致动画来不及播放。通过监听transitionend事件，确保动画完全播放后再执行页面更新，既不破坏原有游戏逻辑，又实现了需求。

简化替代方案 #

如果不需要精确监听动画结束，也可以用setTimeout替代事件监听，代码更简洁：

button.addEventListener('click', (e) => {
  e.target.classList.add('fade-out');
  // 延迟时间与CSS中transition的时长保持一致（1000ms）
  setTimeout(() => {
    selectOption(option);
  }, 1000);
})

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