react制作webapp转场动画探索

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

npm install
npm run dll
npm run start

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

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

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

    
 { React.cloneElement(this.props.children || , {
     setTransition : this.setTransition,
     transitionName : this.state.transitionName
 }) }
    

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

重点说明

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

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

全部代码在本人的github地址，有兴趣的朋友可以去看一下

链接：react-css3-transition-group

思考方案1：

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

思考方案2：

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