https://github.com/houfeng/react-turn

📽React Turn 是一个「功能强、体积小、易使用」的「转场动画」组件
https://github.com/houfeng/react-turn

Last synced: about 20 hours ago
JSON representation

📽React Turn 是一个「功能强、体积小、易使用」的「转场动画」组件

• Host: GitHub
• URL: https://github.com/houfeng/react-turn
• Owner: Houfeng
• Created: 2019-11-04T15:48:20.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T12:02:18.000Z (almost 2 years ago)
• Last Synced: 2024-09-24T08:02:44.736Z (1 day ago)
• Language: CSS
• Homepage:
• Size: 1.02 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 1. 简介

React Turn 是一个「功能强、体积小、易使用」的「转场动画」组件，

对 Route Router 有较好的支持。

# 2. 安装

```bash

npm i react-trun --save

```

# 3. 使用

## 3.1. 单独使用

最简单的使用方式就是一个普通的 div 一样

```jsx

import { TurnView } from "react-turn";

  
{current}


```

在 `TurnView` 的 `value` 发生变化时，将会通过指定的「转场动画」完成子元素的切换。

注意，动画是由 `driver` 负责完成的，在 `react-turn` 包中内建了 `CSSDriver`，这个 driver 包括了 68 种切换效果。

CSSDriver 可在构造时通过一个 `number` 类型的参数指定动画效果，参数为动效的编号（0~67），示例代码如下

```jsx

import { TurnView } from "react-turn";

  
{current}


```

完整的示例: [https://codesandbox.io/s/turn-demo-wh51f](https://codesandbox.io/s/turn-demo-wh51f)

## 3.2. 在 Router 中使用

在一个基于 React 开发的 SPA 应用中，我们常用使用 `react-router` 来管理页面路由，

并在各个页面间切换，通过 `react-turn` 可轻松为路由切换添加转场动效。

```jsx

import { TurnSwitch } from "react-turn";

import { Switch, Route } from"react-router-dom";

//关联 React Router

TurnSwitch.associate(Switch, Route);

//然后用 TurnSwitch 替代 Switch 即可

  

  

  

```

其中 `TurnSwitch` 的属性同 `Switch` 基乎一样，仅多了一个 `turn` 用于指定转场动相关的设定，

`turn` 和 `TrunView` 的属性一致。

完整的示例: [https://codesandbox.io/s/turn-route-demo1-dh8wx](https://codesandbox.io/s/turn-route-demo1-dh8wx)

当然，也可以不使用 `TurnSwitch`，而直接在 React Router 中使用 `TurnView`，  

可参考这个示例：[https://codesandbox.io/s/turn-route-demo2-y6u7y](https://codesandbox.io/s/turn-route-demo2-y6u7y)

# 4. 开发 Driver

TODO://