# sunny-css-transition-switch

> ![npm version](https://img.shields.io/npm/v/sunny-css-transition-switch) ![npm downloads](https://img.shields.io/npm/dm/sunny-css-transition-switch) ![license](https://img.shields.io/npm/l/sunny-css-transition-switch)

Latest version **0.0.1** (published 2022-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install sunny-css-transition-switch
pnpm add sunny-css-transition-switch
yarn add sunny-css-transition-switch
bun add sunny-css-transition-switch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-08-06 |
| First published | 2022-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | shinvey |

## Links

- npm: https://www.npmjs.com/package/sunny-css-transition-switch
- npm.io page: https://npm.io/package/sunny-css-transition-switch

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.13.0
- [react-router](https://npm.io/package/react-router.md) ^5.1.2
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.3.0

## Recent versions

- 0.0.1 (latest) — 2022-08-06

## README

# sunny-css-transition-switch

![npm version](https://img.shields.io/npm/v/sunny-css-transition-switch)
![npm downloads](https://img.shields.io/npm/dm/sunny-css-transition-switch)
![license](https://img.shields.io/npm/l/sunny-css-transition-switch)

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

## Installation

使用 npm 安装

```shell
npm i sunny-css-transition-switch
```

使用 yarn 安装

```shell
yarn add sunny-css-transition-switch
```

使用 pnpm 安装

```shell
pnpm add sunny-css-transition-switch
```

## Usages

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

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

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

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

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

```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组件

```tsx
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](src/examples)

## Browser Compatibility

![浏览器兼容性](https://img.shields.io/badge/browserslist-Android%20%3E%3D%205%2CiOS%20%3E%3D%2010-informational)

## Changelog

See [CHANGELOG.md](CHANGELOG.md)

---
_Source: https://npm.io/package/sunny-css-transition-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._