反应制作的web应用转场动画探索

反应-CSS3 - 过渡组

手机端配合反应路线转场动画案例初探

用法

npm install
npm run dll
npm run start

代码说明

• 采用反应-插件中提供的CSS3动画效果
• 搭配反应路线进行路由切换
• 设置组件进入和退出的CSS样式（通过变换搭配过渡动画）

代码核心

<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>

e月刊通过transitionName达到页面接入或者的英文退出的应该执行的动画

重点说明

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

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

链接：反应-CSS3 - 过渡组

思考方案1：

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

思考方案2：

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

效果图