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)