React Transition Group -- CSSTransition 組件

時間 2019-11-08

標籤 react transition group csstransition 組件欄目 React 简体版

原文原文鏈接

導語

上一篇文章給你們簡單演示了 Transition組件，今天給你們介紹一下 React Transition Group 的第二個組件：CSSTransition 組件。css

CSSTransition

此Transition組件用於CSS動畫過渡，靈感來源於ng-animate庫。node

CSSTransition：在組件淡入appear，進場enter,出場exit時，CSSTransition組件應用了一系列className名來對這些動做進行描述。首先appear被應用到組件className上，接着添加「active」類名來激活CSS動畫。在動畫完成後，原class改變爲done代表組件動畫已經應用完成並加載完成。react

當組件的in屬性變爲true時，組件的className將被賦值爲example-enter，並在下一刻添加example-enter-active的CSS class名。這些都是基於className屬性的約定。即：原組件帶有className="animate-rotate"，則enter狀態時，變爲"animate-rotate-enter"。app

看完了基本介紹，下面來一個最基本的例子：函數

第一步：引入文件動畫

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

第二步：定義CSSTransition 組件的一些屬性以及類的statethis

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

第三步：編寫內部組件以及一些樣式spa

<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樣式code

//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，從而開啓和關閉動畫orm

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