react制作webapp转场动画探索@慕课网原创_慕课网

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达到页面接入或者是退出的应该执行的动画

重点说明

ReactCSSTransitionGroup中的div必须使用style样式，保证页面中心重叠，因为切换开始时，实际上是两个页面同事存在的
不能在ReactCSSTransitionGroup上直接加style，必须内嵌一个div才用切换效果

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

链接：react-css3-transition-group

思考方案1：

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

思考方案2：

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

效果图

react制作webapp转场动画探索原创