react动画库react-transition-group实现

前言

今天学习react中，使用了react-transition-group动画库，使用他我们可以不必手动更改样式，今天简单介绍一下基本用法。

下载react-transition-group

yarn add react-transition-group

引入CSSTransition

项目中引入：

import { CSSTransition } from 'react-transition-group'
<CSSTransition
    in={this.state.focused}
    timeout={200}
    classNames='fade'
>
    <NavSearch className={this.state.focused?'focused':''} 
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
    ></NavSearch>
</CSSTransition>

编写class样式：

// 定义进入过渡的开始状态
    .fade-enter{
        transition:all .2s ease-out;
    }
    // 定义进入过渡生效时的状态
    .fade-enter-active{
        width:240px;
    }
    // 定义离开过渡的开始状态
    .fade-exit{
        transition:all .2s ease-out;
    }
    // 定义离开过渡生效时的状态
    .fade-exit-active{
        width:160px;
    }

总结

react-transition-group使用比较简单，其中in参数主要定义状态切换的控制参数，timeout为动画时间，classNames为定义的class样式。