sunny-css-transition-switch

结合react-router和react-transition-group，提供一个与路由相关的可以使用页面转场特效的Switch组件。

Installation

使用 npm 安装

npm i sunny-css-transition-switch

使用 yarn 安装

yarn add sunny-css-transition-switch

使用 pnpm 安装

pnpm add sunny-css-transition-switch

Usages

以一个h5页面做转场特效举例

先定义父容器基本布局样式 transition-group.scss

/**
页面转场动效基本样式
要求容器内部的page div元素使用绝对定位布局，形成平滑切换效果
 */
.transition-group {
  height: inherit;
  overflow: hidden;

  > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

然后定义页面转场特效为淡入淡出 slide-in-out.scss

@mixin slide($pass, $direction, $active: false) {
  opacity: $pass;
  transform: translateX($direction);

  @if $active {
    transition: all 500ms;
  }
}

$show: 1;
$hide: 0;
$right: 100%;
$left: -100%;
$center: 0;
$animating: true;

// 下一页准备从右向左淡入
.forward-enter {
  // 页面右侧原点
  @include slide($show, $right);
}

// 上一页准备从左往右淡入
.back-enter {
  // 页面左侧原点
  @include slide($hide, $left);
}

// 淡入进当前视窗里
.forward-enter-active,
.back-enter-active {
  @include slide($show, $center, $animating);
}

// 当前页准备淡出
.forward-exit,
.back-exit {
  // 中间原点
  @include slide($show, $center);
}

// 进入下一页，当前页向左淡出
.forward-exit-active {
  @include slide($hide, $left, $animating);
}

// 放回上一页，当前页向右淡出
.back-exit-active {
  @include slide($hide, $right, $animating);
}

在路由中使用支持转场特效的Switch组件

import React, { FC } from 'react'
import { HashRouter, Route, Link } from 'react-router-dom'
import { CSSTransitionSwitch } from 'sunny-css-transition-switch'
export const App: FC = () => (
  <HashRouter>
    <CSSTransitionSwitch>
      <Route path="/" exact>
        Home Page
        <ul>
          <li>
            <Link to="/page1">Page 1</Link>
          </li>
          <li>
            <Link to="/page2">Page 2</Link>
          </li>
        </ul>
      </Route>
      <Route path="/page1">
        <button onClick={() => history.back()}>back</button>
        Page 1
      </Route>
      <Route path="/page2">
        <button onClick={() => history.back()}>back</button>
        Page 2
      </Route>
    </CSSTransitionSwitch>
  </HashRouter>
)

更多用例代码见源码目录 examples

Browser Compatibility

Changelog

See CHANGELOG.md