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)