vue3内置组件Transition，让每次路由跳转都有动画

最新推荐文章于 2024-12-21 02:45:42 发布

徐同保

最新推荐文章于 2024-12-21 02:45:42 发布

阅读量671

点赞数 7

分类专栏：前端技术分享文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/xutongbao/article/details/140929540

版权

前端技术分享专栏收录该内容

271 篇文章 3 订阅

订阅专栏

router/index.ts:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/index/home',
      component: () => import('../views/index/Home.vue'),
    },
    {
      path: '/home',
      component: () => import('../views/home/Index.vue'),
    },
    {
      path: '/me',
      component: () => import('../views/me/Index.vue'),
    },
  ],
})

router.beforeEach((to, from) => {
  return true
})

export default router

App.vue:

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView v-slot="{ Component }">
    <Transition name="m-trans">
      <KeepAlive>
        <component :is="Component"></component>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

<style>
body {
  overflow-x: hidden;
}
.m-trans-enter-active {
  transition: all 1s ease-out;
}

.m-trans-enter-from {
  transform: translateX(200px);
  opacity: 0;
}
</style>

参考链接

https://cn.vuejs.org/guide/built-ins/transition.html