React:如何在动态生成的表项上添加淡出动画？

在React中为动态生成的表项添加淡出动画，可以使用CSS动画结合React的状态管理来实现。以下是实现这一功能的基础概念、步骤和相关代码示例。

基础概念

CSS动画：通过CSS定义元素的进入和离开状态。
React状态管理：使用React的useState或useReducer来控制元素的显示状态。
生命周期方法或Hooks：在组件挂载、更新或卸载时触发动画。

实现步骤

定义CSS动画：创建一个淡出动画的CSS类。
管理组件状态：使用React的状态来控制是否应用淡出动画。
触发动画：在适当的时机（如删除表项时）更新状态以触发动画。

示例代码

CSS部分

/* 定义淡出动画 */
.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

React组件部分

import React, { useState } from 'react';
import './styles.css'; // 引入上面定义的CSS

function DynamicTable() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [fadeOutIndex, setFadeOutIndex] = useState(null);

  const handleRemoveItem = (index) => {
    setFadeOutIndex(index); // 设置要淡出的项的索引
    setTimeout(() => {
      setItems(prevItems => prevItems.filter((_, i) => i !== index)); // 实际移除项
      setFadeOutIndex(null); // 重置淡出索引
    }, 500); // 等待动画完成
  };

  return (
    <table>
      <tbody>
        {items.map((item, index) => (
          <tr key={index} className={fadeOutIndex === index ? 'fade-out' : ''}>
            <td>{item}</td>
            <td><button onClick={() => handleRemoveItem(index)}>Remove</button></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default DynamicTable;

解释

CSS动画：.fade-out类定义了一个0.5秒的淡出效果。
状态管理：fadeOutIndex用于跟踪当前应该淡出的表项索引。
触发动画：当点击“Remove”按钮时，首先设置fadeOutIndex为该项的索引，触发CSS动画。动画完成后，通过setTimeout实际从列表中移除该项，并重置fadeOutIndex。

这种方法不仅适用于表项的删除动画，还可以扩展到其他需要动态添加或移除元素的场景，提供了一种灵活且易于维护的动画实现方式。