react-addons-css-transition-group

标签：注意   slide   cti   inf   onenter   add   select   from   import   

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

标签：注意   slide   cti   inf   onenter   add   select   from   import   

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