动画回调提前执行问题：ToDo应用删除任务时未等动画结束就移除元素

嘿，我完全懂你碰到的这个麻烦——点击删除任务时，元素直接就没了，完全没等到渐隐动画做完，对吧？这大概率是因为你在触发删除的瞬间就直接调用了this.props.action，没给动画留足执行的时间。咱们来一步步搞定这个问题：

1. 先给任务项添加渐隐动画的CSS样式 #

首先定义一个过渡动画，让任务项慢慢变透明：

/* 基础任务项样式 */
.todo-task {
  /* 自定义你的任务项样式，比如内边距、边框等 */
  transition: opacity 0.5s ease-out; /* 动画时长设为0.5秒，可按需调整 */
}

/* 触发删除时的动画类 */
.todo-task.fading-out {
  opacity: 0;
  pointer-events: none; /* 动画过程中禁止点击，避免重复触发删除 */
}

2. 在任务子组件中控制动画流程 #

我们需要先触发动画，等动画结束后再调用父组件的移除函数。这里用React的ref来获取DOM元素，监听动画结束事件：

首先在组件的构造函数里初始化状态和ref：

constructor(props) {
  super(props);
  this.state = {
    isDeleting: false
  };
  this.taskRef = React.createRef(); // 用来获取任务项的DOM元素
}

然后写删除点击的处理函数：

handleDelete = () => {
  // 第一步：标记为删除中，触发动画类的添加
  this.setState({ isDeleting: true }, () => {
    // setState的回调会在DOM更新后执行，此时动画类已经生效
    const taskElement = this.taskRef.current;
    
    // 定义动画结束后的处理函数
    const onAnimationFinish = (event) => {
      // 如果有多个过渡属性，只在opacity变化完成后执行
      if (event.propertyName === 'opacity') {
        // 调用父组件的移除函数，传入任务ID
        this.props.action(this.props.taskId);
        // 移除事件监听，防止内存泄漏
        taskElement.removeEventListener('transitionend', onAnimationFinish);
      }
    };
    
    // 监听过渡结束事件
    taskElement.addEventListener('transitionend', onAnimationFinish);
  });
}

最后在render里把ref和动态类名加上：

render() {
  const { taskContent } = this.props;
  const { isDeleting } = this.state;
  
  return (
    <div 
      ref={this.taskRef}
      className={`todo-task ${isDeleting ? 'fading-out' : ''}`}
    >
      <span>{taskContent}</span>
      <button onClick={this.handleDelete}>删除</button>
    </div>
  );
}

额外注意事项 #

• 如果用的是CSS关键帧动画（@keyframes）而不是过渡（transition），要把监听的事件改成animationend而不是transitionend。
• 如果你担心不同浏览器的兼容性，可以给事件名加上前缀（比如webkitTransitionEnd），不过现在主流浏览器都支持无前缀的事件了。
• 尽量避免用setTimeout来延迟调用父组件方法，因为动画时长如果修改，setTimeout的时间也要跟着改，不如监听事件可靠。

这样调整后，点击删除按钮时，任务项会先慢慢变透明，等动画彻底结束后，才会调用父组件的setState把任务从列表里移除，就不会出现直接消失的问题啦！

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