React进出场动画(组件/页面切换动画)
关于进出场动画进出场动画,最早我实在Angular中接触到的。Angular中简单的配置,就可实现页面有动画的卸载和动画记载,令我影响深刻。但是在react中,并没找到直接的进出场动画。调研了一下,这个具体实现,要借助官方的一个组件来实现。 演示这个效果是基于iOS系统设置列表选择列表项的效果制作的,但是返回效果没能实现iOS一样的倒退效果。 ReactCSSTransitionGroup这个组件是 react-addons-css-transition-group 这个库中的组件。这个库也是官方推荐的React拓展库。这个库暂时不多做介绍,详细请看比如 react ReactCSSTransitionGroup 动画api 原理这个动画完成的原理主要有两个:
实现过程实现过程分3步。 1.准备好不同页面和路由表。Demo中有三个页面:index,list,button页面。 import Layout from '../layout/index' import Home from '../containers/Home' import Button from '../containers/DataEntry/ButtonPage' import List from '../containers/DataDisplay/ListPage' export const createRoutes = () => ({ path: '/',component: Layout,indexRoute: { component: Home },childRoutes: [ {path: 'index',component: Home},{path: '/data-entry',childRoutes: [ {path: 'button',component: Button} ]},{path: '/data-display',childRoutes: [ {path: 'list',component: List} ]} ] }); export default createRoutes 这里关键就是 根路径 "/" 下对应的是Layout组件,该组件就是路由切换的核心。 2.Layout组件Layout组件是项目的布局组件,其作用就是一个拦截器,目前负责页面实现切换效果。 import React from 'react' import 'normalize.css' import '../static/sass/index.scss' import '../static/sass/component.scss' import '../static/icon/font.css' import ReactCSSTransitionGroup from 'react-addons-css-transition-group' class Layout extends React.Component { render () { return ( <ReactCSSTransitionGroup component="div" className="react-container" transitionName="slide-in" transitionEnterTimeout={300} transitionLeaveTimeout={300}> <div key={this.props.location.pathname} className={this.props.location.pathname}> {this.props.children} </div> </ReactCSSTransitionGroup> ) } } export default Layout 给ReactCSSTransitionGroup组件设置参数,使其渲染出一个class为react-container的div标签。过渡动画类名是slide-in,进场动画和出厂动画都是300ms。 3.CSS类// 进出场动画 // 飞入 .slide-in-appear { transform: translate3D(100%,0); transition: all 300ms linear; &.slide-in-appear-active { transform: translate3D(0,0); } } .slide-in-enter { transform: translate3D(100%,0); transition: all 300ms linear; &.slide-in-enter-active { transform: translate3D(0,0); } } // 向左滑出 .slide-in-leave { position: absolute; left: 0; top: 0; opacity: 1; transform: translate3D(0,0); transition: all 300ms linear; &.slide-in-leave-active { opacity: 0.01; transform: translate3D(-100%,0); } } 通过定义好动画不同状态的css,来实现对应效果。 总结React中的进出场动画,需要自己研究实现,没有直接的插件或源生组件。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |