umi脚手架环境下实现H5页面路由转场动画

最新推荐文章于 2024-07-25 16:22:05 发布

llxhzm

最新推荐文章于 2024-07-25 16:22:05 发布

阅读量3.8k

点赞数 2

分类专栏： react 文章标签： react umi react-transition-group 转场动画

本文链接：https://blog.csdn.net/qq_20059455/article/details/100189819

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

环境介绍

umi 是一个可插拔的企业级 react 应用框架。我们使用 react-transition-group 动画库来实现路由转场动画

核心思路

利用 umi 提供的 layouts 实现全局布局，在路由外面套的一层路由。
利用 react-transition-group 动画库提供的钩子函数，监听到页面退出与进入状态
根据提供的钩子实现我们的动画

核心代码所在目录中位置

在这里插入图片描述

核心代码的讲解

layouts 下的 index.ts 文件

import React from 'react';
// 高阶组件需要用withRouter包裹一下
import withRouter from 'umi/withRouter';
// 引入动画库的俩个组件
import { TransitionGroup, CSSTransition } from 'react-transition-group';

// 根据前进还是后退显示不同的转场动画效果
const ANIMATION_MAP: any = {
  PUSH: 'forward',
  POP: 'back'
};

export default withRouter(({location, children, history}: any) => {
  return (
     // 这个组件的详细应用 见官网 这里就直接写现成的了
    <TransitionGroup childFactory={child => React.cloneElement( child, {classNames: ANIMATION_MAP[history.action]})}>
      <CSSTransition key={location.pathname} timeout={300}>
        {children}
      </CSSTransition>
    </TransitionGroup>
  );
});

css3 animation文件

/**
 *  页面转场动画 需要导入到 global.less 中
 */

// 动画开始的时候 页面一定要定位住 不然页面组件的布局是上下布局 导致动画效果不显示
.main {
  position: fixed;
  top: 0;
  width: 100vw;
  min-height: 100vh;
  background: white;
}

.forward-enter {
  &:extend(.main);
  opacity: 0;
  transform: translateX(100%);
}

.forward-enter-active {
  &:extend(.main);
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms ease-in;
}

.forward-exit {
  &:extend(.main);
  opacity: 1;
  transform: translateX(0);
}

.forward-exit-active {
  &:extend(.main);
  opacity: 0;
  transform: translateX(-100%);
  transition: all 300ms ease-in;
}

.back-enter {
  &:extend(.main);
  opacity: 0;
  transform: translateX(-100%);
}

.back-enter-active {
  &:extend(.main);
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms ease-in;
}

.back-exit {
  &:extend(.main);
  opacity: 1;
  transform: translateX(0);
}

.back-exit-active {
  &:extend(.main);
  opacity: 0;
  transform: translate(100%);
  transition: all 300ms ease-in;
}