react-transition-group实现路由切换过渡效果

时间  2019-11-17
标签 react transition group 实现 路由 切换 过渡 效果 栏目 React 繁體版
原文   原文链接

基本介绍

效果演示

  • 简单介绍：本人实现了一个常见问题列表，点击列表项进入详情页，目标是在页面切换的时候加过渡效果，提高用户体验。
  • 没加过渡效果的，进入详情页时很突兀：
    无过渡效果演示
  • 加了过渡效果的，看起来好一点了吧：
    过渡效果演示
  • 下面来看具体怎么实现吧。

react-transition-group 基本知识

官方文档 👉react-transition-group 文档react

  • 在 react 项目中可以使用官网提供的动画过渡库 react-transition-group 来实现切换页面（路由切换）时的过渡效果。git

  • react-transition-group 中，暴露了三个组件，分别是：github

    • Transition
    • CSSTransition
    • TransitionGroup

  • 其中最重要的是 CSSTransition，而 TransitionGroup 用于列表项的过渡动画。项目中我也是使用了这两个组件。typescript

  • TransitionGroup 不提供任何形式的动画，具体的动画取决与咱们包裹的 Transition || CSSTransition 的动画，因此咱们能够在列表里面作出不一样类型的动画。编程

  • CSSTransition 组件中较为重要的 api 有：api

    • in：boolean，控制组件显示与隐藏，true 显示，false 隐藏。浏览器

    • timeout：number，延迟，涉及到动画状态的持续时间。也可传入一个对象，如{ exit:300, enter:500 } 来分别设置进入和离开的延时。bash

    • classNames：string，动画进行时给元素添加的类名。通常利用这个属性来设计动画。这里要特别注意是 classNames 而不是className。react-router

    • unmountOnExit：boolean，为 true 时组件将移除处于隐藏状态的元素，为 false 时组件保持动画结束时的状态而不移除元素。通常要设成 true。app

    • appear：boolean，为 false 时当 CSSTransition 控件加载完毕后不执行动画，为 true 时控件加载完毕则当即执行动画。若是要组件初次渲染就有动画，则须要设成 true。

    • key：string，这个属性是配合 TransitionGroup 组件来使用的，能够经过key来判断是否须要触发动画。这个属性十分重要！

  • classNames属性的做用是：当组件被应用动画时，不一样的动画状态（enter，exits，done）将做为className属性的后缀来拼接为新的className，如为 CSSTransition组件设置了如下属性：

<CSSTransition
          classNames={'fade'}
          appear={true}
          key={location.pathname}
          timeout={300}
          unmountOnExit={true}
        >
          /* 省略... */
        </CSSTransition>
复制代码
  • 将会生成 fade-enter、fade-enter-active、fade-enter-done、fade-exit、fade-exite-active、fade-exit-done、fade-appear 以及 fade-appear-active多个className。每个独立的className都对应着单独的状态。

react-router 冷知识

  • 关于 react-router 的基本知识可具体查看官方文档 👉react-router文档，这里就再也不重复进行介绍。

  • 这里介绍你们平时没注意的关于 Switch 组件的冷知识，也是实现路由切换动画的关键！

  • Switch 有一个很重要的属性：location。通常咱们不会给该组件设置 location 属性。有无该属性的区别：

    • 不设置location属性： Switch 组件的子组件（通常是 Route 或 Redirect）会根据当前浏览器的 location 做为匹配依据來进行路由匹配。
    • 设置location属性：Switch 组件的子组件会根据定义的 location 做为匹配依据。

  • 看完基本介绍，下面就看看如何在项目中使用 react-transition-group 实现页面切换过渡效果吧。

完整流程

  • 首先，根据以前博客已经介绍的 👉 react + typescript 项目的定制化过程 搭建好项目后，在进行组件开发以前，便可在项目中引入 react-transition-group。同时，因为项目中我还使用了typescript，因此还要安装 @types/react-transition-group。安装命令以下：
yarn add react-transition-group
yarn add @types/react-transition-group --dev
复制代码
  • 在入口文件 App.tsx 中使用：
import { createHashHistory } from 'history';
import React from 'react';
import { Router } from 'react-router';
import { Route, Switch, withRouter } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import routeData from './common/route'; // 路由配置
import NotFound from './views/Exception';

const history = createHashHistory();

const Routes = withRouter(({ location }) => (
  <TransitionGroup className={'router-wrapper'}>
    <CSSTransition timeout={300} classNames={'fade'} key={location.pathname} unmountOnExit={true}>
      <Switch>
        {routeData.map(({ path, component, exact }: IRouterItem) => (
          <Route key={path} path={path} component={component} exact={exact} />
        ))}
        <Route component={NotFound} />
      </Switch>
    </CSSTransition>
  </TransitionGroup>
));

const App: React.FC = () => {
  return (
    <Router history={history}>
      <Routes />
    </Router>
  );
};

export default App;
复制代码
  • withRouter的做用：能够包装任何自定义组件，能够把不是经过路由切换过来的组件中，将react-router 的 history、location 和 match 三个方法传入 props 对象上。

默认状况下必须是通过路由匹配渲染的组件才存在 this.props，才拥有路由参数，才能使用编程式导航的写法。然而不是全部组件都直接与路由相连（经过路由跳转到此组件）的，当这些组件须要路由参数时，使用 withRouter 就能够给此组件传入路由参数，此时就可使用 this.props。

  • 好比 App.js 这个组件，通常是首页，不是经过路由跳转过来的，而是直接从浏览器中输入地址打开的，若是不使用 withRouter，此组件的 this.props 为空，无法执行 props 中的 history、location 和 match 等方法。

  • 为了让入口文件 App.tsx 看起来更加简洁，我将使用了 react-transition-group 的路由切换相关代码封装成Routes组件。

  • 修改后的入口文件 App.tsx 内容以下：

import { createHashHistory } from 'history';
import React from 'react';
import { Router } from 'react-router';
import Routes from './components/Routes';

const history = createHashHistory();

const App: React.FC = () => {
  return (
    <Router history={history}>
      <Routes />
    </Router>
  );
};

export default App;
复制代码
  • Routes组件内容以下：
import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import routeData from '../../common/route';
import NotFound from '../../views/Exception';

interface IRouterItem {
  component?: React.ComponentType;
  path?: string;
  exact?: boolean;
}

class Routes extends React.Component<any> {
  render () {
    const { location } = this.props;
    return (
      <TransitionGroup className={'router-wrapper'}>
        <CSSTransition
          classNames={'fade'}
          appear={true}
          key={location.pathname}
          timeout={300}
          unmountOnExit={true}
        >
          <Switch location={location}>
            {routeData.map(({ path, component, exact }: IRouterItem) => (
              <Route key={path} path={path} component={component} exact={exact} />
            ))}
            <Route component={NotFound} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

export default withRouter(Routes);
复制代码
  • 决定是否有动画效果的关键步骤来了，就是完成动画的相关样式 ！因为动画效果是做用的全局，因此应该写在全局样式里面。
  • 关于模块化的 less 和全局的 less 的相关介绍可具体查看前一篇博客 👉 react + typescript 项目的定制化过程进行了解。
  • 咱们要作的就是在src目录下新建一个index.less文件，内容以下：
/* 动画相关样式 */
.fade-enter, .fade-appear {
  opacity: 0;
}

.fade-enter.fade-enter-active, .fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0;
}
复制代码
  • 而后在入口文件index.tsx进行引入便可：
import './index.less';
复制代码
  • 以上则能够实如今切换路由时呈现页面过渡效果，且无bug（首次加载无动画、接口请求两次）。

⚠ ️若是只是想实现过渡效果，按照上面介绍的内容便可实现

⚠ ️若是想了解出现以上两种bug的缘由，则能够继续看下面的内容。

踩坑实践

  • 说没踩坑是不可能的，刚开始的代码也不是这样的。下面来解释为什么会出现首次加载无动画、接口请求两次这两种bug。

首次加载无动画

  • 以前写过的文章提到过，我在项目中使用了一个叫 react-loadable 的第三方库来进行代码拆分，实现组件按需加载。（相关介绍可具体查看前一篇博客 👉 react + typescript 项目的定制化过程进行了解）
  • 然而，发现当使用 react-loadable 后首次加载时页面切换没有过渡效果，具体看下面的效果：
    首次加载无动画
  • 能够看到，当刷新页面时，列表页（第一个页面）并无过渡效果，进入详情页也是没有过渡效果，很突兀，点击后退到列表页（有动画），以后进入详情页和切出来都有过渡效果，这就是我遇到的首次加载时页面切换没有过渡效果问题。
  • 因为本次实现的功能比较简单，为了解决这个问题，只能暂时在项目中舍弃使用 react-loadable 进行组件按需加载了😭。
  • 修改后的路由配置文件 route.tsx 内容大体以下：
// path：src/common/route.tsx
import * as React from 'react';
import DetailPage from '../views/DetailPage';
import Exception from '../views/Exception';
import HomePage from '../views/HomePage';

const routeConfig: any = [
  {
    path: '/',
    component: HomePage,
  },
  {
    path: '/detail/:id',
    component: DetailPage,
  },
  /**
   * Exception 页面
   */
  {
    path: '/exception/404',
    component: Exception,
  },
];

function generateRouteConfig (route: IRouteConfig[]) {
  return route.map(item => {
    return {
      key: item.path,
      exact: typeof item.exact === 'undefined' ? true : item.exact,
      ...item,
      component: item.component,
    };
  });
}

export default generateRouteConfig(routeConfig);
复制代码
  • 至于二者结合会出现这样的bug缘由还在观察中，若是有大佬知道能够留言告知，或者以后知道缘由了再进行更新。

接口请求两次

  • 咱们都知道，通常是在 react 生命周期的 componentDidMount 方法中调接口（请求相关数据）。componentDidMount 方法会在render()以后当即执行，拉取数据后使用setState() 方法触发从新渲染(re-render)。
  • 一开始路由切换相关代码封装的Routes组件内容以下：
import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import routeData from '../../common/route';
import NotFound from '../../views/Exception';

interface IRouterItem {
  component?: React.ComponentType;
  path?: string;
  exact?: boolean;
}

class Routes extends React.Component<any> {
  render () {
    const { location } = this.props;
    return (
      <TransitionGroup className={'router-wrapper'}>
        <CSSTransition
          classNames={'fade'}
          appear={true}
          key={location.pathname}
          timeout={300}
          unmountOnExit={true}
        >
          <Switch>
            {routeData.map(({ path, component, exact }: IRouterItem) => (
              <Route key={path} path={path} component={component} exact={exact} />
            ))}
            <Route component={NotFound} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

export default withRouter(Routes);
复制代码
  • 与没bug的代码差异就是，以前没有给 Switch 组件设置location属性。致使首次加载后进入详情页，切出来都会请求两次接口，具体看看下面的演示：

接口请求两次演示

  • 为何？前面提到：

Switch 有一个很重要的属性：location。通常咱们不会给该组件设置 location 属性。有无该属性的区别：

  • 不设置location属性： Switch 组件的子组件（通常是 Route 或 Redirect）会根据当前浏览器的 location 做为匹配依据來进行路由匹配。
  • 设置location属性：Switch 组件的子组件会根据定义的 location 做为匹配依据。
  • 关键代码块截图：
    代码
  • 结合代码👆看解释👇：
    • CSSTransition 这个组件中的 key 属性是配合 TransitionGroup 组件使用的，能够经过 key 来判断是否须要触发动画。
    • 在切换路由时，旧的路由内容会在必定时间内过渡消失，新的路由内容过渡显示，过渡期间会同时存在两个节点，旧节点显示旧的路由内容，新的节点则显示新的路由内容。
    • CSSTransition 组件中的 key 属性决定该节点是否显示，而 Router 组件中的 location 属性会在路由发生变化时进行更新，刚好 location 的 pathname 能够做为 CSSTransition 组件中的 key 属性。当路由切换的时候， location 对象就会发生改变，新的 key key会使得页面从新渲染时出现两个 CSSTransition。
    • 若是只是给 CSSTransition 组件配置 key 属性，会发现旧节点会去匹配新的路由内容，这是由于 Route 组件默认根据当前浏览器的 location 进行匹配，为了让旧节点根据旧的 location 进行匹配，则须要设置 Switch 组件的 location 属性。
  • 组件重复渲染就会致使接口的重复请求，赶忙给 Switch 组件加个 location 属性吧。
  • 本文的内容就介绍到这里啦，欢迎留言，喜欢的麻烦点个赞👍，谢谢❤️。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程