CSSTransition组件

1 . 用处：

CSSTransition组件用于CSS动画过渡，灵感来源于ng-animate库。在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。

2 . 有 appear 、enter 、exit三种状态 :

appear:

• 首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。

enter:

• 当组件的in属性变为true时，组件的className将被赋值为example-enter，并在下一刻添加example-enter-active的CSS class名。

exit:

• 跟 enter 一样，退出时先是className将被赋值为example-exit，并在下一刻添加example-exit-active的CSS class名。

3 . 相关属性设置：

3 . 1 in:

控制组件应用动画的属性值，通常将一个react的组件state赋值给它，通过改变state，从而开启和关闭动画

3 . 2 classNames: (注意带 s)

将作为className属性的后缀来拼接为新的className，例如classNames="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.

3 . 3 onEntering():

也是一个过渡组件的回调函数，当组件enter-active或appear-active时，立即调用此函数

type: Function(node: HtmlElement, isAppearing: bool)

3 . 4 onEntered():

同样是回调函数，当组件的enter,appearclassName被移除时，立即调用此函数

type: Function(node: HtmlElement, isAppearing: bool)

3 . 5 onExit():

当组件应用exit类名时，调用此函数

type: Function(node: HtmlElement)

3 . 6 onExiting():

当组件应用exit-active类名时，调用此函数

type: Function(node: HtmlElement)

3 . 7 onExited():

当组件exit类名被移除，且添加了exit-done类名时，调用此函数

4 . 样例：

第一步：引入文件

import React,{ Component } from 'react'
import CSSTransition from 'react-transition-group/CSSTransition'
import './css/index.css'

第二步：定义CSSTransition 组件的一些属性以及类的state

state = {
        show: true
    }
    
<CSSTransition
    in={this.state.show}
    classNames='show'
    timeout={300}
    unmountOnExit>
    
</CSSTransition>

第三步：编写CSSTransition组件内部的一些内容以及一些样式

<div className='circle' onClick={()=>this.setState(state=>({show: !state.show}))}> 
    show 
</div>
 
//index.css
.circle {
    margin: 2px;
    width: 50px;
    height: 50px;
    position: absolute;
    display: inline-block;
    left: 100px;
    box-shadow: 0px 1px 2px #999;
    text-shadow: 0px 1px 2px #999;
    line-height: 80px;
    text-align: center;
    color: white;
    font-size: 10px;
}

第四步：根据CSSTransition 配置的ClassNames属性编写css样式

 
//index.css
.show-enter {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
  }
.show-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0%);
    transition: all 300ms ease-out;
}
.show-exit {
    opacity: 1;
    transform: scale(1) translateY(0%);
}
.show-exit-active {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
}