react-transition-group动画库这个库包括3个组件：Transition,CSSTransition,TransitonGroup，今天刚在项目中使用了Transition组件，记录一下使用过程总结,其他两个组件使用然后引入。或者移动到react-transition-group的新CSS3transition属性。该属性可以为元素中的某个属性设置过渡动画，如：transition:width2s；请参阅：CSS3过渡属性transition-property指定设置过渡效果的CSS属性的名称。transition-duration指定完成转换所需的秒数或毫秒数。transition-timing-function指定速度效果的速度曲线。transition-delay定义过渡效果何时开始。Transition的属性元素动画出现和消失有3个阶段。可以为这些属性绑定自定义函数：onEnter：进入（出现）开始时执行onEntering：进入（出现）过程中执行onEntered：进入（出现）结束执行onExit：离开（消失）时执行onExiting：离开时执行(消失)onExited:离开(消失)后执行其他属性介绍：addEndListener:该属性可以监听出现的3个阶段的执行或完成消失的3个阶段的执行完成时执行该函数监听的自定义函数.unmountOnExit:true表示退出时移除dom，即元素的dom动画执行完后直接删除元素节点。appear：渲染时直接执行动画，默认falseenter：设置为true后，动画进入（出现）三个阶段，前两个阶段onEnter，onEntering先执行，延迟一段时间后再执行onEntered。可以简单理解为动画进入（出现）时有延迟退出：设置为true后，动画三次离开（消失）前两个阶段先执行onExit和onExiting，之后执行onExited一段时间的延迟。可以简单理解为动画离开（消失）时有延时超时：为上面的出现、进入、退出设置延时时间in：动画进入（出现）退出（消失）交替进行，点击一次为动画生效，再次点击动画失效。使用标签设置上述属性。标签的内容用箭头函数包裹起来，箭头函数有一个参数state（参数名可以随意设置），返回值是实现动画效果的元素，元素可以设置样式。案例一这个案例是我的测试案例，通过下拉框的透明度实现下拉框出现和消失的效果：importReactfrom'react';import{connect}from'react-redux';//路由控制import{withRouter}from'react-router-dom';import{Icon}from'antd';//过渡动画importTransitionfrom'react-transition-group/Transition';//duration设置延迟时间，下面的timeout属性使用constduration={appear:3000,enter:3000,exit:3000};//默认样式constdefaultStyle={//ease-in-out指定以慢速过渡开始和结束的过渡效果:`opacity${3000}msease-in-out`,opacity:0,};//过渡样式consttransitionStyles={//进入2nd、3rd时舞台动画，如果你设置了延迟时间，你会发现刚出现时透明度是“0.5”，那么三秒后透明度就会是“1”//因为设置的``enter:3000``delaytime超时属性会在第三阶段生效entering:{opacity:0.5},entered:{opacity:1},//Stage2and3离开时exiting:{opacity:0.5},exited:{opacity:0}};//进入状态的三个事件，你想干什么就干什么.log(isAppearingpearing,node,'onEntering')};letonEntered=(node,isAppearing)=>{console.log(isAppearing,node,'onEntered')};//测试动画执行过程，什么时候结束letdone=()=>{console.log('onExit')};//三个退出状态事件letonExit=(node)=>{console.log('onExit')};letonExiting=(node)=>{console.log('onExiting')};letonExited=(node)=>{console.log('onExited',node)};letaddaddEndListener=(node)=>{//原生时间转移事件node.addEventListener('transitionend',this.done,false);};classNavTopextendsReact.Component{constructor(props,context){super(props,context);this.state={in:false};}render(){return{/*HomeNavigation*/}大鱼资源网络{this.setState({in:!this.state.in})}}/>
