react-transition-group 一个官网提供的动画过度库,css动画的方式,比较局限,涉及到一些js动画的时候没法处理了,借住这个react-transition-group模块可以更方便的实现更加复杂的动画效果,而官方提供的三个组建(Transition,CSSTransition,TransitonGroup)。
http://reactcommunity.org/react-transition-group/ 官网
或
# yarn yarn add react-transition-group由于Reaction转换组相当小,在应用程序中包含库的开销可以忽略不计。但是,在捆绑时从外部CDN获益的情况下,请链接到以下CDN: Https://unpkg.com/react-transition-group/dist/react-transition-group.js
<script src="Https://unpkg.com/react-transition-group/dist/react-transition-group.js"></script>index.js 文件
import React from 'react'; import { Route, Switch, withRouter, BrowserRouter } from 'react-router-dom'; import './index.css'; import {CSSTransition, TransitionGroup} from 'react-transition-group'; import {HomePage, AboutPage, ListPage, DetailPage} from '../Pages/index'; const ANIMATION_MAP = { PUSH: 'forward', POP: 'back' } const Routes = withRouter(({location, history}) => ( <TransitionGroup className={'router-wrapper'} childFactory={child => React.cloneElement( child, {classNames: ANIMATION_MAP[history.action]} )} > <CSSTransition timeout={500} key={location.pathname} > <Switch location={location}> <Route exact path={'/'} component={HomePage} /> <Route exact path={'/about'} component={AboutPage} /> <Route exact path={'/list'} component={ListPage} /> <Route exact path={'/detail'} component={DetailPage} /> </Switch> </CSSTransition> </TransitionGroup> )); export default class App4 extends React.PureComponent { render() { return ( <BrowserRouter> <Routes/> </BrowserRouter> ); } }timeout 属性可以指定对应值的动画时间
timeout={{ enter: 300, exit: 500, }}index.css 文件
.router-wrapper { overflow: hidden; } .forward-enter { opacity: 0; transform: translateX(100%); } .forward-enter-active { opacity: 1; transform: translateX(0); transition: all 500ms; } .forward-exit { opacity: 1; transform: translateX(0); } .forward-exit-active { opacity: 0; transform: translateX(-100%); transition: all 500ms; } .back-enter { opacity: 0; transform: translateX(-100%); } .back-enter-active { opacity: 1; transform: translateX(0); transition: all 500ms; } .back-exit { opacity: 1; transform: translateX(0); } .back-exit-active { opacity: 0; transform: translate(100%); transition: all 500ms; }如果出现缓存问题 解决方案如下: react-activation 参考网址
yarn add react-activation # or npm install react-activation// 用 AliveScope和KeepAlive 包裹 TransitionGroup 缓存就可以解决
import KeepAlive, { AliveScope } from "react-activation"; import { TransitionGroup, CSSTransition } from "react-transition-group"; <AliveScope> <TransitionGroup> <CSSTransition> <div> {/* 路由缓存功能 AliveScope KeepAlive */} <Route exact path={Routers.HOME} render={(props) => ( <KeepAlive> <Home {...props} /> </KeepAlive> )} /> </div> </CSSTransition> </TransitionGroup> </AliveScope>CSSTransition 组件属性
组件属性说明in动画状态timeout动画执行时间classNamescss动画名称mountOnEnter默认情况下,子组件与父转换组件一起立即挂载。如果你想“延迟挂载”第一个in={true}上的组件,你可以设置mountOnEnter。在第一次进入转换之后,组件将保持挂载状态,即使在“退出”状态下也是如此,除非你还指定unmountOnExitunmountOnExit默认情况下,子组件在达到“退出”状态后仍然挂载。如果你希望在组件退出后卸载组件,请设置unmountOnExitappear如果组件挂载时显示组件,则该组件不进行转换。如果您希望在第一个挂载集上进行转换,则显示为true,并且组件将在< transition >挂载后立即进行转换,注意:没有特定的“显示”状态。appear只添加一个额外的enter转换enter启用或禁用enter转换exit启用或禁用exit转换addEndListener添加自定义转换结束触发器。使用正在转换的DOM节点和done回调调用。允许更细粒度的转换结束逻辑。注意:如果提供超时,仍将其用作回退onEnter在应用‘Enter’或‘出现’类后立即触发回调onEntering在应用‘Enter-Active’或‘出现-活动’类后立即触发回调onEntered在“Enter”或“出现”类之后立即触发回调移除而done类添加到DOM节点onExit在应用“Exit”类后立即触发回调onExiting在应用“Exit-Active”之后立即触发回调onExited在“退出”类之后立即触发回调。移除而exit-done类添加到DOM节点css动画属性
动画属性说明.xxx-enter入场前加载动画.xxx-enter-active入场后到入场结束的过程.xxx-enter-done入场动画执行完毕后.xxx-exit出场前加载动画.xxx-exit-active出场后到入场结束的过程.xxx-exit-done出场动画执行完毕后