为了账号安全,请及时绑定邮箱和手机立即绑定

react-transition-group

2020.04.21 20:47 3977浏览
/enter是入场前的刹那(点击按钮),appear指页面第一次加载前的一刹那(自动)
.fade-enter, .fade-appear {
    opacity: 0;
}
//enter-active指入场后到入场结束的过程,enter的下一帧插入,appear-active则是页面第一次加载自动执行
.fade-enter-active, .fade-appear-active { 
    opacity: 1;
    transition: opacity 1s ease-in;
}
//入场动画执行完毕后,保持状态,同时会移除fade-enter和fade-enter-active
.fade-enter-done {
    opacity: 1;
}
//同理,出场前的一刹那,以下就不详细解释了,一样的道理
.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-exit-done {
    opacity: 0;
}
onEnter
应用<Transition>“ enter”或“ appear”类后立即触发的回调。
onEntering
应用<Transition>“ enter-active”或“ appear-active”类后立即触发的回调。
onEntered
<Transition>在删除 “ enter”或“ appear”类并将done该类添加到DOM节点后立即触发的回调。`
<Transition>应用“退出”类后立即触发的回调。`
onExit
<Transition>应用“exit”类后立即触发的回调。
onExiting
<Transition>应用“退出exit-active”后立即触发的回调。`
onExited
删除<Transition> “exit-done”类并将该类添加到DOM节点后立即触发的回调

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消