React动画
(1)必须依赖react-transition-group
(2)类的使用以及钩子函数
- (一) react-transition-group使用
(1) 引入
import { CSSTransition} from 'react-transition-group'
(2) 使用
- 必须用CSSTransition套起来
- in 表示开关
- 属性 timeout 表示动画的时间
- appear = {true}表示一加载就执行
- classNames = "fade" 表示起的变量名称
- unmountOnExit表示用完了以后DOM消失
- onEnter表示钩子函数刚进入的时候里面就一个参数el
- onEnter ,onEntering ,onEntered onExit onExiting onExited 钩子函数
<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 刚入场的时候
- fade-enter-active 全程参与
- fade-enter-done 结束的时候
- 特别注意的就是 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>
