react-transition-group简介: react-transition-group 一个官网提供的动画过度库,css动画的方式,比较局限,涉及到一些js动画的时候没法处理了,借住这个react-transition-group模块可以更方便的实现更加复杂的动画效果,而官方提供的三个组建(Transition,CSSTransition,TransitonGroup)。
http://reactcommunity.org/react-transition-group/ 官网
安装 react-transition-group
# npm
npm install react-transition-group --save
#如果用了 TypeScript 需要安装 @type
npm install @types/react-transition-group
或
# yarn
yarn add react-transition-group
CDN/外部 由于Reaction转换组相当小,在应用程序中包含库的开销可以忽略不计。但是,在捆绑时从外部CDN获益的情况下,请链接到以下CDN:
Https://unpkg.com/react-transition-group/dist/react-transition-group.js
src="Https://unpkg.com/react-transition-group/dist/react-transition-group.js">
官方提供组件
组件 | 说明 |
---|---|
Transition | 过渡组件 |
CSSTransition | 动画进入出入组件 |
SwitchTransition | 动画却换组件 |
TransitionGroup | 列表动画组件 |
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}) => (
React.cloneElement(
child,
{classNames: ANIMATION_MAP[history.action]}
)}
>
={location}>
));
export default class App4 extends React.PureComponent {
render() {
return (
);
}
}
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 KeepAlive */}
(
)}
/>
API CSSTransition 组件属性
组件属性 | 说明 |
---|---|
in | 动画状态 |
timeout | 动画执行时间 |
classNames | css动画名称 |
mountOnEnter | 默认情况下,子组件与父转换组件一起立即挂载。如果你想“延迟挂载”第一个in={true}上的组件,你可以设置mountOnEnter。在第一次进入转换之后,组件将保持挂载状态,即使在“退出”状态下也是如此,除非你还指定unmountOnExit |
unmountOnExit | 默认情况下,子组件在达到“退出”状态后仍然挂载。如果你希望在组件退出后卸载组件,请设置unmountOnExit |
appear | 如果组件挂载时显示组件,则该组件不进行转换。如果您希望在第一个挂载集上进行转换,则显示为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节点 |
动画属性 | 说明 |
---|---|
.xxx-enter | 入场前加载动画 |
.xxx-enter-active | 入场后到入场结束的过程 |
.xxx-enter-done | 入场动画执行完毕后 |
.xxx-exit | 出场前加载动画 |
.xxx-exit-active | 出场后到入场结束的过程 |
.xxx-exit-done | 出场动画执行完毕后 |
推荐阅读
- react|react-transition-group的使用方法
- react|react-transition-group小结
- react|React Native 制作iOS静态库供其他原生项目使用
- Javascript|JavaScript权威指南7(四) 第十一章 JavaScript 标准库
- React|【学习笔记】React+React全家桶学习笔记
- React|web前端高级React - React从入门到进阶之React条件渲染
- React|web前端高级React - React从入门到进阶之元素渲染
- React|web前端高级React - React从入门到进阶之React事件处理
- WEB前端框架|web前端高级React - React从入门到进阶之JSX简介