分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

react-addons-css-transition-group

发布时间:2023-09-06 02:04责任编辑:胡小海关键词:暂无标签

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved