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