|
react-transition-group react的动画模块
1. 安装并引入,详细请百度
2.使用
<CSSTransition
in = {this.state.show}
timeout = {1000}
className='fade'
// 如果使用 unmountOnExit 则该demo 会被移除 或增加 不单单只是影藏
// 另外有许多钩子 可以用
>
<div> 我爱钟无艳 </div>
</CSSTransition>
原理:会在div 上添加 好多个class 从而实现动画效果
这个fade 与ClassName 的 值一样
.fade-enter{
入场动画的class
}
.fade-enter-active{
}
.fade-enter-done{
入场动画的结束class
}
.fade-exit{
出场动画的class
}
.fade-exit-active{
}
.fade-exit-done{
出场动画的结束class
}
|
|