React动画的基础知识

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简单地演示如何在 React 创建动画效果,因为我也没有做过线上的 React 动画实例,谨以此文抛砖引玉,算是最基础的入门了解。

React 插件

React 官方提供了两个插件用于处理动画效果:一个是偏底层的 react-addons-transition-group,一个是在前者基础上进一步封装的 react-addons-css-transition-group。在使用它们之前,需要先检查下你使用的是哪种类型的 React 版本,一般通过 npm 安装的 React 默认不会安装这两个插件,需要手动安装它们:

npm install --save react-addons-transition-group react-addons-css-transition-group

在这里只介绍 react-addons-css-transition-group 的使用方式,使用它可以快速利用 CSS 的能力实现组件的入场和出场动画。使用该插件实现 React 动画需要两个部分的协作,首先是 JS 部分的组件:

// 非完整代码
class App extends React.Component {
    state = {
        itemList: [{
            key: getRandomKey(),
            color: colorSet[getRandomIndex(0, 10)]
        }]
    };

    render () {
        const { itemList } = this.state;
        let itemNodeList = [];

        itemList.forEach((item) => {
            itemNodeList.