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

效果图:

React Transition Group -- CSSTransition 组件

完整代码

//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)

相关推荐