在項(xiàng)目的根目錄下安裝依賴包
# npm
npm install react-transition-group --save
# yarn
yarn add react-transition-group
安裝完成引入react-transition-group包
import { CSSTransition ,TransitionGroup } from 'react-transition-group';
//用法： 在需要做動(dòng)畫的元素上包裹一個(gè)< CSSTransition></ CSSTransition>組件
//in={this.props.show} 的值改變會(huì)觸發(fā)動(dòng)畫
//timeout ={2000} 動(dòng)畫執(zhí)行多久
//classNames = 'fade' css類名
//unmountOnExit dom會(huì)被移除
//apper={true} 第一次顯示需要?jiǎng)赢嫿吣Ｐ枰赾ss文件中新增加類名
<CSSTransition
in={this.props.show}
timeout ={2000}
classNames = 'fade'
unmountOnExit
apper={true}
>
<div onClick={this.handelClick}>{content}</div>
</CSSTransition>
//入場(chǎng)動(dòng)畫
.fade-enter,fade-appear {
opacity: 0;
}
.fade-enter-active,fade-appear-active {
opacity: 0.5;
transition: opacity 1s ease-in;
}
.fade-enter-done {
opacity: 1;
}
//出場(chǎng)動(dòng)畫
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0.5;
transition: opacity 1s ease-in;
}
.fade-exit-done {
opacity: 0;
}
CSSTransition中的一些鉤子函數(shù)
onEnter：入場(chǎng)動(dòng)畫第一幀的時(shí)候觸發(fā)
onEntering ： 入場(chǎng)動(dòng)畫第二幀的時(shí)候觸發(fā)
onEntered ：入場(chǎng)動(dòng)畫結(jié)束的時(shí)候觸發(fā)
onExit ： 出場(chǎng)動(dòng)畫結(jié)束第一幀的時(shí)候觸發(fā)
onExiting : 出場(chǎng)動(dòng)畫結(jié)束第二幀的時(shí)候觸發(fā)
onExited : 出場(chǎng)動(dòng)畫結(jié)束的時(shí)候觸發(fā)
多個(gè)dom元素動(dòng)畫的實(shí)現(xiàn)
//用法
<TransitionGroup>
{
this.state.list.map((item,index) => {
return (
<CSSTransition
timeout ={2000}
classNames = 'fade'
unmountOnExit
apper={true}
>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
