React Transition Group -- CSSTransition 组件

导语

上一篇文章给大家简单演示了 Transition组件，今天给大家介绍一下 React Transition Group 的第二个组件：CSSTransition 组件。

CSSTransition

此Transition组件用于CSS动画过渡，灵感来源于ng-animate库。

CSSTransition：在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。

当组件的in属性变为true时，组件的className将被赋值为example-enter，并在下一刻添加example-enter-active的CSS class名。这些都是基于className属性的约定。即：原组件带有className="animate-rotate"，则enter状态时，变为"animate-rotate-enter"。

看完了基本介绍，下面来一个最基本的例子：

第一步：引入文件

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>

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

<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;
}

效果图：

完整代码

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

export default class App extends Component {

    state = {
        show: true
    }

    render () {
        return (
            <CSSTransition
                in={this.state.show}
                classNames='show'
                timeout={300}
                unmountOnExit>
                {state => {
                    // console.log(state)
                    return (
                        <div className='circle' onClick={()=>this.setState(state=>({show: !state.show}))}> 
                            show 
                        </div>
                    )
                }}
            </CSSTransition>
        )
    }
}

//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;
}

.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;
}

Props

in

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

type: boolean

default: false

classNames

classNames[注意带s]属性用于当组件被应用动画时，不同的动画状态（enter,exits,done）将作为className属性的后缀来拼接为新的className，如：

className="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一个独立的className都对应着单独的状态。

type: string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }

onEnter

<Transition>组件的回调函数，当组件enter或appear时会立即调用。

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

onEntering

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

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

onEntered

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

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

onExit

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

type: Function(node: HtmlElement)

onExiting

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

type: Function(node: HtmlElement)

onExited

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

type: Function(node: HtmlElement)