面试题：React列表渲染中如何实现简单的入场动画

Question

在React列表渲染场景下，假设列表项数据为数组 `const data = [1, 2, 3, 4, 5]`，使用 `map` 方法渲染列表，要求为每个列表项添加简单的淡入入场动画，简述实现思路并给出关键代码。

Answer 1

实现思路

1. 使用CSS的@keyframes定义淡入动画。
2. 为每个列表项添加一个类名，通过该类名应用淡入动画。
3. 在React的map方法渲染列表时，为每个列表项元素添加相应的类名。

关键代码

import React from 'react';

const data = [1, 2, 3, 4, 5];

const App = () => {
  return (
    <div>
      <style>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        .fade-in {
          animation: fadeIn 1s ease-in;
        }
      `}</style>
      <ul>
        {data.map((item) => (
          <li key={item} className="fade-in">
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;