面试题：React中如何在生命周期方法里实现简单的元素淡入动画

Question

请描述在React组件的生命周期方法中，怎样利用CSS样式和状态来实现一个元素的淡入动画效果，假设使用的是类组件，并且可以使用React的内置生命周期方法如componentDidMount等。要求简要说明思路以及关键代码片段。

Answer 1

思路

1. 在类组件的状态中定义一个控制淡入的标志，比如 isFadingIn，初始值为 false。
2. 在 componentDidMount 生命周期方法中，将 isFadingIn 设置为 true，表示开始淡入。
3. 利用CSS的 opacity 属性结合状态 isFadingIn 来控制元素的透明度，从而实现淡入效果。

关键代码片段

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

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

  componentDidMount() {
    this.setState({ isFadingIn: true });
  }

  render() {
    const { isFadingIn } = this.state;
    return (
      <div className={`fade-in ${isFadingIn? 'fade-in-active' : ''}`}>
        这里是要淡入的内容
      </div>
    );
  }
}

export default FadeInComponent;

在 styles.css 中：

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in-active {
  opacity: 1;
}