React動畫
(1)必須依賴react-transition-group
(2)類的使用以及鉤子函數(shù)
- (一) react-transition-group使用
(1) 引入
import { CSSTransition} from 'react-transition-group'
(2) 使用
- 必須用CSSTransition套起來
- in 表示開關(guān)
- 屬性 timeout 表示動畫的時間
- appear = {true}表示一加載就執(zhí)行
- classNames = "fade" 表示起的變量名稱
- unmountOnExit表示用完了以后DOM消失
- onEnter表示鉤子函數(shù)剛進入的時候里面就一個參數(shù)el
- onEnter ,onEntering ,onEntered onExit onExiting onExited 鉤子函數(shù)
<CSSTransition
in={this.state.flag}
timeout={2000}
appear={true}
classNames="fade"
unmountOnExit
onEnter={el => {
el.style.color = 'red'
}}
>
<div>
<div>hello</div>
</div>
</CSSTransition>
PS :類名
- fade-enter 剛?cè)雸龅臅r候
- fade-enter-active 全程參與
- fade-enter-done 結(jié)束的時候
- 特別注意的就是 fade-appear-active這里看情況要是opacity就不加屈留，要是運動之類的就必須加上最后的位置
.fade-enter,
.fade-appear {
transform: translate(0, 0);
}
.fade-appear-active {
transform: translate(80%, 0);
transition: all 2s linear;
}
.fade-enter-active {
transform: translate(80%, 0);
transition: all 2s linear;
}
.fade-enter-done {
transform: translate(80%, 0);
}
.fade-exit {
transform: translate(80%, 0);
}
.fade-exit-active {
transform: translate(0, 0);
transition: all 2s linear;
}
.fade-exit-done {
transform: translate(0, 0);
color: blue;
}
- (二) TransitonGroup
多個動畫的特效。最外層必須用TransitionGroup包起來。
<TransitionGroup key={index}>
<CSSTransition
in
timeout={2000}
appear={true}
classNames="fade"
unmountOnExit
onEnter={el => {
el.style.color = 'red'
}}
>
<List
content={item}
index={index}
deletedate={this.deleteone.bind(this)}
/>
</CSSTransition>
</TransitionGroup>
