面试题：React生命周期方法下复杂动画队列的管理

实现方案
- 状态管理：利用React类组件的state来记录当前动画的执行阶段。通过不同的状态值，判断应该执行哪一个动画。
- 生命周期方法：使用componentDidMount生命周期方法来启动第一个动画，后续动画根据前一个动画的结束事件来触发。利用componentDidUpdate方法，在状态更新后，根据新的状态值来执行相应的动画。
主要代码逻辑
- 定义状态和动画函数：

import React, { Component } from'react';
import './styles.css';

class AnimationComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            animationStep: 0 // 0: 初始状态，1: 元素从左侧滑入，2: 另一个元素旋转360度，3: 一组元素同时淡入
        };
        this.slideIn = this.slideIn.bind(this);
        this.rotate = this.rotate.bind(this);
        this.fadeIn = this.fadeIn.bind(this);
    }

第一个动画（元素从左侧滑入）：

slideIn() {
    // 这里假设我们有一个名为slide - in的CSS动画类
    const element = document.getElementById('slide - in - element');
    element.classList.add('slide - in');
    element.addEventListener('animationend', () => {
        this.setState({ animationStep: 1 });
    });
}

第二个动画（另一个元素旋转360度）：

rotate() {
    // 这里假设我们有一个名为rotate的CSS动画类
    const element = document.getElementById('rotate - element');
    element.classList.add('rotate');
    element.addEventListener('animationend', () => {
        this.setState({ animationStep: 2 });
    });
}

第三个动画（一组元素同时淡入）：

fadeIn() {
    // 这里假设我们有一个名为fade - in的CSS动画类
    const elements = document.querySelectorAll('.fade - in - elements');
    elements.forEach((element) => {
        element.classList.add('fade - in');
    });
}

生命周期方法中调用动画函数：

componentDidMount() {
    this.slideIn();
}

componentDidUpdate(prevProps, prevState) {
    if (prevState.animationStep === 0 && this.state.animationStep === 1) {
        this.rotate();
    } else if (prevState.animationStep === 1 && this.state.animationStep === 2) {
        this.fadeIn();
    }
}

render() {
    return (
        <div>
            <div id="slide - in - element">要从左侧滑入的元素</div>
            <div id="rotate - element">要旋转的元素</div>
            <div className="fade - in - elements">要淡入的元素1</div>
            <div className="fade - in - elements">要淡入的元素2</div>
        </div>
    );
}
}

export default AnimationComponent;

CSS动画定义：

.slide - in {
    animation: slide - in - animation 1s ease - in - out forwards;
}

@keyframes slide - in - animation {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.rotate {
    animation: rotate - animation 1s ease - in - out forwards;
}

@keyframes rotate - animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fade - in {
    animation: fade - in - animation 1s ease - in - out forwards;
    opacity: 0;
}

@keyframes fade - in - animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

以上代码通过状态管理和生命周期方法，实现了在React类组件中按顺序执行多个动画，保证了动画之间的连贯性和稳定性。具体实现中，使用了CSS动画，并通过JavaScript来控制动画的启动和顺序。

面试题：React生命周期方法下复杂动画队列的管理

知识考点

面试题答案