vue router 切换路由的时候，页面的动画效果，使页面切换好看，以及控制有的页面使用切换路由特效，有的页面不用

一、使用切换效果
在router文件中 useTransition: true代表需要动画

meta: {
title: “新开卡预填表单”,
keepAlive: true,
useTransition: true
},

[
{
path: "/",
name: "Home",
meta: {
title: "首页",
keepAlive: true,
useTransition: false
},
component: () => import("@/views/home.vue")
},
{
path: "/clientPortrait",
name: "clientPortrait",
meta: {
title: "画像",
keepAlive: true,
useTransition: true
},
component: () => import("@/views/clientPortrait/clientPortrait.vue")
},
{
path: "/sendCardInputForm",
name: "sendCardInputForm",
meta: {
title: "预填表单",
keepAlive: true,
useTransition: true
},
component: () => import("@/views/sendCard/inputForm.vue")
},

在app.vue文件

//路由守卫
router.beforeEach方法，获取来自和去往的路由

useTransition来代表是否需要动画，获取to页面的路由状态，来判断useTransition为true还是false；
from为true to也为true 的时候，切换页面有特效，所以需要设置延时的true，以保证切走的时候有特效，这是下方代码的意义
setTimeout(() => {
// 离开sendCardInputForm,transferAccountsInputForm 需要动画
useTransition.value = true;
}, 1000);

<!-- <RouterView></RouterView> -->
<RouterView v-if="!useTransition"></RouterView>
<RouterView v-if="useTransition" v-slot="{ Component }">
<transition name="slide" mode="out-in">
<component :is="Component" />
</transition>
</RouterView>

import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
let routes = router.getRoutes();
// 页面切换是否需要动画
let useTransition = ref(false);

useTransition.value = route.meta && route.meta.useTransition ? true : false;

//路由守卫
router.beforeEach((to, from, next) => {
if (
to.name === "Home" &&
(from.name === "sendCardInputForm" || from.name === "transferAccountsInputForm")
) {
// sendCardInputForm,transferAccountsInputForm 返回首页不需要动画
useTransition.value = false;
} else if (to.name === "Home" && from.name === "clientPortrait") {
// 画像返回首页需要动画
useTransition.value = true;
} else if (to.name === "sendCardInputForm" || to.name === "transferAccountsInputForm") {
// 进入sendCardInputForm,transferAccountsInputForm 不需要动画
useTransition.value = false;
setTimeout(() => {
// 离开sendCardInputForm,transferAccountsInputForm 需要动画
useTransition.value = true;
}, 1000);
} else {
//除了以上特别的路由，其他的按照router文件里配置的来决定需要不需要动画效果
useTransition.value = to.meta && to.meta.useTransition ? true : false;
}
next();
});

transition name=“slide” mode=“out-in” slide的动画的css，滑入滑出，标签里 out-in先出后入

.slide-enter-active,
.slide-leave-active {
transition: all 0.75s ease-out;
}

.slide-enter-to {
position: absolute;
left: 0;
}

.slide-enter-from {
position: absolute;
left: -100%;
}

.slide-leave-to {
position: absolute;
right: -100%;
}

.slide-leave-from {
position: absolute;
right: 0;
}

不知道为什么，这个动画在pc端是平移的out in

在移动端out时候会向右上角缩小，平移的in
有大佬懂得可以赐教

页面动画就是这样了，bye~~

原文地址：https://blog.csdn.net/a12336487213/article/details/140440677

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！