面试题：React中如何使用CSS动画实现组件的淡入效果

Question

在React项目里，假设你有一个组件需要实现淡入效果，初始时透明度为0，在组件挂载后逐渐变为不透明。请描述实现该动画效果的思路，并给出关键代码片段。

Answer 1

实现思路

1. 使用React的生命周期方法componentDidMount，在组件挂载后触发动画。
2. 利用CSS的transition属性来实现淡入效果，通过修改透明度opacity值来控制。
3. 在组件的状态中定义一个表示透明度的变量，通过改变这个变量的值来触发CSS过渡动画。

关键代码片段

import React, { Component } from 'react';
import './styles.css'; // 假设样式写在这个文件

class FadeInComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: 0
    };
  }

  componentDidMount() {
    this.setState({ opacity: 1 });
  }

  render() {
    return (
      <div className="fade-in" style={{ opacity: this.state.opacity }}>
        {/* 组件内容 */}
        <p>这是一个淡入效果的组件</p>
      </div>
    );
  }
}

export default FadeInComponent;

在styles.css中：

.fade-in {
  transition: opacity 1s ease;
}

上述代码中，componentDidMount生命周期钩子在组件挂载后立即执行，将opacity状态设置为1，从而触发CSS的transition动画，实现淡入效果。transition属性定义了动画的时长和过渡效果。