From 9382eab44c3be56e5517dad86cfd26257ea03a98 Mon Sep 17 00:00:00 2001
From: XT-202209211744\Administrator <623844246@qq.com>
Date: Wed, 02 Nov 2022 22:41:36 +0800
Subject: [PATCH] 最新
---
src/App.vue | 29 ++++++++++++++++-------------
1 files changed, 16 insertions(+), 13 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 51d7db5..565493a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,7 @@
</div>
<div class="body-box">
<transition
- :duration="1000"
- mode="out-in"
- appear
- enter-active-class="animated fadeInRight"
- leave-active-class="animated fadeOut"
- appear-active-class="animated zoomInDown"
+ :name="transitionName"
>
<router-view></router-view>
</transition>
@@ -46,19 +41,26 @@
// this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red'
},
watch: {
- $route(val) {
- let title = val.meta.title || "首页";
+ $route(to, from) {
+ let title = to.meta.title || "首页";
this.title = title;
-
- if (val.meta.iconRight) {
- this.iconRight = val.meta.iconRight;
+ if (to.meta.iconRight) {
+ this.iconRight = to.meta.iconRight;
} else {
this.iconRight = "default";
}
- if (val.meta.hasHeader) {
+ if (to.meta.hasHeader) {
this.hasHeader = true;
} else {
this.hasHeader = false;
+ }
+ if (to.meta.index > from.meta.index) {
+ console.log("slide-left");
+ //设置动画名称
+ this.transitionName = "slide-left";
+ } else {
+ console.log("slide-right");
+ this.transitionName = "slide-right";
}
}
},
@@ -66,7 +68,8 @@
return {
title: "首页",
hasHeader: false,
- iconRight: "default"
+ iconRight: "default",
+ transitionName: ''
};
}
};
--
Gitblit v1.9.3