@fubei/web-anime v0.0.1

Features

• An Anime design system for web.

Environment Support

• Support Vue 3

Using npm or yarn

npm install @fubei/web-anime

注册 main.ts

import anime from '@fubei/web-anime'
app.use(anime)

引用 App.vue

<template>
  <router-view v-slot="{ Component }">
    <fs-transition>
      <component :is="Component" />
    </fs-transition>
  </router-view>
</template>

<script setup lang="ts">
  import { RouterView } from 'vue-router'
  defineOptions({
    name: 'App'
  })
</script>

设置动画（前进/后退） 路由守卫 routerGuards.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 方法

const { setReplaceAnime } = FsTransition.useTransition()

export function routeReplaceChange(routeName: string, param?: LocationQueryRaw): void {
  setReplaceAnime()
  router.replace({
    name: routeName,
    query: param
  })
}