Skip to content

iconWave/react-css3-transition-group

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-css3-transition-group

手机端配合react-route转场动画案例初探

用法

npm install
npm run dll
npm run start

代码说明

  • 采用react-addons中提供的css3动画效果

  • 搭配react-route进行路由切换

  • 设置组件进入和退出的css样式(通过transform搭配transition动画)

代码核心

<ReactCSSTransitionGroup 
    className="transition-wrapper"
    component="div" 
    style={{height:'100%'}} 
    transitionName={this.state.transitionName}
    transitionEnterTimeout={200} 
    transitionLeaveTimeout={200}>
    <div key={this.props.location.pathname} style={{position:"absolute", width: "100%", height: '100%'}}>
        { React.cloneElement(this.props.children || <div />, {
            setTransition : this.setTransition,
            transitionName : this.state.transitionName
        }) }
    </div>
</ReactCSSTransitionGroup>

通过切换transitionName达到页面接入或者是退出的应该执行的动画

重点说明

  1. ReactCSSTransitionGroup中的div必须使用style样式,保证页面中心重叠,因为切换开始时,实际上是两个页面同事存在的

  2. 不能在ReactCSSTransitionGroup上直接加style,必须内嵌一个div才用切换效果


思考方案1:

采用redux管理transitionName,在需要前进或者退出的时候,改变redux中的数据,达到动画切换(redux方案中的样式未用bootstrap,比较简陋)

思考方案2:

采用添加中间过渡页,通过子组件改变父组件中的transitionName达到相同的目的

效果图

zc

About

手机端配合react-route转场动画案例初探

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.7%
  • Other 0.3%