首页 > Web开发 > 详细

react-addons-css-transition-group

时间:2018-07-17 17:24:17      阅读:202      评论:0      收藏:0      [点我收藏+]

1.

import ReactCssTransitionGroup from ‘react-addons-css-transition-group‘

2.

<ReactCssTransitionGroup component="div" transitionName="slide-up" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{ selectorIsShow
? <Selector
userInfoselect={Selectorinfo}
userInfohide={(e)=>this.userInfohide(e)}
selectrole={(value)=>this.selectrole(value)}/>
: ‘‘
}
</ReactCssTransitionGroup>

3.

.slide-up-enter{

transition:all .5s;
transform:translateY(100%);
}
.slide-up-enter-active{
transform:translateY(0);
}
.slide-up-leave{
transition:all .3s;
transform:translateY(0);
}

4.

需要注意的地方:1.秒数对应     2. 100%是隐藏起来的,0是展示出来的

 

 

 

 

 

 

 

 

 


.slide-up-leave-active{
transform:translateY(100%);
}

react-addons-css-transition-group

原文:https://www.cnblogs.com/luziluck/p/9324418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!