Web H5 Anime
## Features
- An Anime design system for web.
## Environment Support
- Support Vue 3
## Using npm or yarn
```bash
npm install @fubei/web-anime
```
## 注册 main.ts
```ts
import anime from '@fubei/web-anime'
app.use(anime)
```
## 引用 App.vue
```vue
```
## 设置动画（前进/后退） 路由守卫 routerGuards.ts
```ts
import type { Router } from 'vue-router'
import { FsTransition } from '@fubei/web-anime'
const { setEnterAnime, setLeaveAnime } = FsTransition.useTransition()
export function createRouterGuards(router: Router, whiteNameList: string[]) {
router.beforeEach(async (_to, from, next) => {
return setLeaveAnime(from).then(() => {
next()
})
})
router.afterEach((_to, from) => {
setEnterAnime(from)
console.log(whiteNameList, 'whiteNameList')
// if (!whiteNameList.includes(to.name as string)) {
// window.ap.setNavigationBar({ title: to.meta.title, reset: true })
// }
})
router.onError((error) => {
console.log(error, '路由错误')
})
}
```
## 设置动画（替换） hook routeReplaceChange 方法
```ts
const { setReplaceAnime } = FsTransition.useTransition()
export function routeReplaceChange(routeName: string, param?: LocationQueryRaw): void {
setReplaceAnime()
router.replace({
name: routeName,
query: param
})
}
```