React高级(八) 动画相关

一. react-transition-group

React有着极好的开发生态，开发需要的任何基本需求都可以找到官方或大神造的轮子，动画这种必不可少的东西当然也不例外，React生态中有很多第三方的动画组件，react-transition-group是react官方提供的动画过渡库，有着完善的API文档 ，可以满足日常动画开发需求。

1.1 安装react-transition-group

使用它要先进行安装，这里使用npm的形式进行安装了，当然也可以使用yarn。

先用VSCode打开项目根目录，然后打开终端，输入下面的命令，进行安装：

npm install react-transition-group --save

安装好后，你可以先去github上来看一下文档，他是有着三个核心库（或者叫组件）。

• Transition
• CSSTransition
• TransitionGroup

1.2 使用CSSTransition

其实这个库用起来根ng-animate差不多，先来看看如何使用CSSTransition。

先用import进行引入，代码如下：

import { CSSTransition } from 'react-transition-group'

引入后便可以使用了，使用的方法就和使用自定义组件一样,直接写<CSSTransition>，而且不再需要管理className了，这部分由CSSTransition进行管理。

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
            >
                <div>BOSS级人物-孙悟空</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>召唤Boss</button></div>
        </div>
        );
}

需要注意的是classNames这个属性是有s的，如果你忘记写，会和原来的className混淆出错，这个一定要注意。

在修改样式之前，有一些类名：

• xxx-enter: 进入（入场）前的CSS样式；
• xxx-enter-active:进入动画直到完成时之前的CSS样式;
• xxx-enter-done:进入完成时的CSS样式;
• xxx-exit:退出（出场）前的CSS样式;
• xxx-exit-active:退出动画直到完成时之前的的CSS样式。
• xxx-exit-done:退出完成时的CSS样式。

你会发现我们再也不用自己管理className了，而是完全交给了react-transition-group来做。

1.3 unmountOnExit 属性

学到这里，会感觉这样写也没有简化多少，更没特殊的效果，你玩我？

其实不是的，比如我们给<CSSTransition>加上unmountOnExit，加上这个的意思是在元素退场时，自动把DOM也删除，这是以前用CSS动画没办法做到的。

比如我们把代码写成这个样子：

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
                unmountOnExit
            >
                <div>BOSS级人物-孙悟空</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>召唤Boss</button></div>
        </div>
        );
}

二. 多DOM动画制作和编写

上一节的学习，只能控制一个DOM元素的动画，要想控制多个DOM元素，就需要借助react-transition-group这个动画库了。这节课就带你了解一下多DOM动画控制的方法。

2.1 使用TransitionGroup

它就是负责多个DOM元素的动画的，我们还是拿小姐姐这个案例作例子，现在可以添加任何的服务项目，但是都是直接出现的，没有任何动画，现在就给它添加上动画。添加动画，先引入TransitionGrop。

直接打开/src/Xiaojiejie.js的文件，然后在最顶部同时

import {CSSTransition , TransitionGroup} from 'react-transition-group'

引入之后，就可以使用这个组件了，方法是在外层增加<TransitionGroup>标签

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)}
                />
            )
        })
    }
    </TransitionGroup>
</ul> 

这个需要放在循环的外边，这样才能形成一个组动画,但是只有这个<TransitonGroup>是不够的，你还是需要加入<CSSTransition>,来定义动画。

2.2 加入<CSSTranstion>标签

可以完全仿照上节课的经验，为Xiaojiejie组件，加上具体的动画设置，就可以实现多DOM元素的动画效果了。代码如下：

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index+item}  
                >
                    <XiaojiejieItem 
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                    />
                </CSSTransition>
            )
        })
    }
    </TransitionGroup>
</ul>