Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cd145e1

Browse files
增加过渡动画
1 parent 01cc0c1 commit cd145e1

File tree

9 files changed

+179
-52
lines changed

9 files changed

+179
-52
lines changed

‎src/App.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<template>
2-
<div class="app__wrapper">
2+
<!-- 🔥按需加载路由:- [另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新](https://segmentfault.com/a/1190000012083511) -->
3+
<!-- - [vue-router 之 keep-alive](https://www.jianshu.com/p/0b0222954483) -->
4+
<!-- - [<keep-alive>组件缓存问题](https://github.com/vuejs/vue-router/issues/811) -->
5+
<!-- <div class="app__wrapper">
36
<transition
47
name="custom-classes-transition"
58
:enter-active-class="enterAnimate"
69
:leave-active-class="leaveAnimate"
710
>
8-
<!-- 🔥按需加载路由:- [另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新](https://segmentfault.com/a/1190000012083511) -->
9-
<!-- - [vue-router 之 keep-alive](https://www.jianshu.com/p/0b0222954483) -->
10-
<!-- - [<keep-alive>组件缓存问题](https://github.com/vuejs/vue-router/issues/811) -->
1111
<keep-alive>
12-
<!-- 这里是会被缓存的视图组件 -->
1312
<router-view v-if="$route.meta.keepAlive"></router-view>
1413
</keep-alive>
1514
</transition>
@@ -18,12 +17,10 @@
1817
:enter-active-class="enterAnimate"
1918
:leave-active-class="leaveAnimate"
2019
>
21-
<!-- 这里是不被缓存的视图组件 -->
2220
<router-view v-if="!$route.meta.keepAlive"></router-view>
2321
</transition>
24-
<!-- tabBar -->
25-
<!-- <tabBar></tabBar> -->
26-
</div>
22+
</div> -->
23+
<vue-route-transition :keepAlive="true"></vue-route-transition>
2724
</template>
2825

2926
<script>
@@ -80,6 +77,9 @@ export default {
8077
mounted() {
8178
console.log("appvue");
8279
console.log(this.$route.meta);
80+
},
81+
created() {
82+
console.log("🔥App");
8383
}
8484
};
8585
</script>

‎src/components/vue-route-transition/RouteLayout.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<div class="vue-route-transition__wrapper">
3-
<header>
3+
<!-- <header>
44
<slot name="header"></slot>
5-
</header>
5+
</header>-->
66
<main class="vue-route-transition__content" :id="cId">
77
<slot></slot>
88
</main>
9-
<footer>
9+
<!-- <footer>
1010
<slot name="footer"></slot>
11-
</footer>
11+
</footer>-->
1212
</div>
1313
</template>
1414
<script>

‎src/components/vue-route-transition/RouteTransition.vue‎

Lines changed: 63 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
11
<template>
2+
<!-- https://www.cnblogs.com/mmzuo-798/p/10712009.html -->
23
<div class="vue-route-transition">
4+
<!-- 需keep-alive -->
35
<transition :name="state.pageDirection" @leave="setRouterMap">
6+
<keep-alive>
7+
<router-view
8+
v-if="keepAlive === true && $route.meta.keepAlive !== false"
9+
></router-view>
10+
</keep-alive>
11+
</transition>
12+
<!-- 无需keep-alive -->
13+
<transition :name="state.pageDirection" @leave="setRouterMap">
14+
<router-view
15+
v-if="keepAlive === false || $route.meta.keepAlive === false"
16+
></router-view>
17+
</transition>
18+
<!-- <transition :name="state.pageDirection" @leave="setRouterMap">
419
<keep-alive
520
v-if="this.keepAlive === true && $route.meta.keepAlive !== false"
621
>
7-
<router-view></router-view>
22+
<router-view
23+
v-if="this.keepAlive === true && $route.meta.keepAlive !== false"
24+
></router-view>
825
</keep-alive>
926
<router-view v-else></router-view>
10-
</transition>
27+
</transition>-->
1128
</div>
1229
</template>
1330
<script>
31+
// 全局的
1432
var localSessionRouteChain = sessionStorage.getItem("$$routeChain") || [];
15-
1633
export default {
1734
name: "vue-route-transition",
1835
props: {
@@ -25,7 +42,9 @@ export default {
2542
try {
2643
localSessionRouteChain =
2744
this.$route.path !== "/" ? JSON.parse(localSessionRouteChain) : [];
45+
console.log("6666");
2846
} catch (error) {
47+
console.log("8888");
2948
localSessionRouteChain = [];
3049
}
3150
return {
@@ -39,23 +58,29 @@ export default {
3958
},
4059
methods: {
4160
addRouteChain(route) {
61+
console.log("addRouteChain - ", this.state.addCount);
62+
console.log("addRouteChain - ", localSessionRouteChain.length);
4263
if (this.state.addCount === 0 && localSessionRouteChain.length > 0) {
4364
// 排除刷新的时候
4465
this.state.addCount = 1;
66+
console.log("哭泣哭泣");
4567
} else {
4668
if (
69+
this.state.addCount === 0 ||
4770
(this.state.addCount !== 0 &&
4871
this.state.routeChain[this.state.routeChain.length - 1].path !==
49-
route.path) ||
50-
this.state.addCount === 0
72+
route.path)
5173
) {
74+
// 入栈
5275
this.state.routeChain.push({
5376
path: route.path
5477
});
78+
// 存储
5579
sessionStorage.setItem(
5680
"$$routeChain",
5781
JSON.stringify(this.state.routeChain)
5882
);
83+
// 添加数
5984
this.state.addCount++;
6085
}
6186
}
@@ -73,6 +98,7 @@ export default {
7398
this.state.routerMap["from"] = from.path;
7499
},
75100
setRouterMap() {
101+
console.log("🐴setRouterMap", this.$route);
76102
let dir = this.state.pageDirection;
77103
let to = this.state.routerMap.to.replace(/\//g, "_");
78104
let from = this.state.routerMap.from.replace(/\//g, "_");
@@ -82,9 +108,11 @@ export default {
82108
try {
83109
if (dir === "slide-left") {
84110
// 进入
111+
console.log("进入");
85112
this.state.routerMap[from] = document.getElementById(from).scrollTop;
86113
} else if (dir === "slide-right") {
87114
// 返回
115+
console.log("返回");
88116
if (this.keepAlive === true && this.$route.meta.keepAlive !== false) {
89117
document.getElementById(to).scrollTop = this.state.routerMap[to];
90118
}
@@ -94,40 +122,59 @@ export default {
94122
}
95123
},
96124
mounted() {
125+
console.log("vue-route-transition");
97126
this.$router.beforeEach((to, from, next) => {
98127
console.log("🐴beforeEach");
99128
console.log(to);
100129
console.log(from);
101130
102131
// 定义一个可以记录路由路径变化的数据,这里用sessionStorage,或者在window.routeChain等变量
103132
let routeLength = this.state.routeChain.length;
133+
134+
console.log("routeLength -- ", routeLength);
135+
console.log("state.addCount -- ", this.state.addCount);
104136
if (routeLength === 0 || this.state.addCount === 0) {
137+
console.log("🔥-1");
105138
this.setPageDirection({ dir: "slide-left", to, from });
106139
this.addRouteChain(from);
107140
this.addRouteChain(to);
108141
} else if (routeLength === 1) {
142+
console.log("🔥-2");
109143
this.setPageDirection({ dir: "slide-left", to, from });
110144
this.addRouteChain(to);
111145
} else {
146+
console.log("🔥-3");
112147
let lastBeforeRoute = this.state.routeChain[routeLength - 2];
113148
if (lastBeforeRoute.path === to.path && to.meta.slideLeft !== true) {
149+
console.log("🔥-4");
114150
this.popRouteChain();
115151
this.setPageDirection({ dir: "slide-right", to, from });
116152
} else {
153+
console.log("🔥-5");
117154
this.addRouteChain(to);
118155
this.setPageDirection({ dir: "slide-left", to, from });
119156
}
120157
}
158+
console.log("🔥😪🔥");
159+
console.log(this.state);
121160
next();
122161
});
123162
},
163+
created() {
164+
console.log("created😁😁😁 ", this.$route.meta);
165+
console.log("created😁😁😁 ", this.state);
166+
},
124167
activated() {
125-
console.log("😁😁😁 " + this.state);
168+
console.log("activated😁😁😁 ", this.$route.meta);
169+
console.log("activated😁😁😁 ", this.state);
126170
}
127171
};
128172
</script>
129173

130-
<style lang="less">
174+
<style scoped></style>
175+
176+
<style scoped>
177+
/* 子绝父相 */
131178
.vue-route-transition {
132179
position: absolute;
133180
width: 100%;
@@ -138,6 +185,7 @@ export default {
138185
backface-visibility: hidden;
139186
perspective: 1000;
140187
}
188+
141189
.fade-enter-active {
142190
animation: pageFadeIn 400ms forwards;
143191
}
@@ -149,32 +197,28 @@ export default {
149197
opacity: 1;
150198
}
151199
}
152-
/*路由前进,退出*/
153-
154-
.slide-left-leave-active {
155-
animation: pageFromCenterToLeft 400ms forwards;
156-
z-index: 1;
157-
}
158200
159201
/*路由后退,进入*/
160-
161202
.slide-right-enter-active {
162-
animation: pageFromLeftToCenter 400ms forwards;
203+
animation: pageFromLeftToCenter 2000ms forwards;
163204
z-index: 1;
164205
}
165206
166207
/*路由后退,退出*/
167-
168208
.slide-right-leave-active {
169-
animation: pageFromCenterToRight 400ms forwards;
209+
animation: pageFromCenterToRight 2000ms forwards;
170210
z-index: 10;
171211
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
172212
}
173213
214+
/*路由前进,退出*/
215+
.slide-left-leave-active {
216+
animation: pageFromCenterToLeft 2000ms forwards;
217+
z-index: 9;
218+
}
174219
/*路由前进,进入*/
175-
176220
.slide-left-enter-active {
177-
animation: pageFromRightToCenter 400ms forwards;
221+
animation: pageFromRightToCenter 2000ms forwards;
178222
z-index: 10;
179223
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
180224
}
@@ -197,7 +241,6 @@ export default {
197241
}
198242
199243
/*路由前进,退出*/
200-
201244
@keyframes pageFromCenterToLeft {
202245
from {
203246
opacity: 1;

‎src/main.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,13 @@ import './assets/css/wechat.css'
2828
import './assets/css/iconfont.css'
2929

3030
// 全局导航栏
31-
import NavigationBar from 'components/navigationBar'
31+
import NavigationBar from '@/components/navigationBar'
3232
Vue.use(NavigationBar)
3333

34+
// 全局布局和路由过渡动画
35+
import RouteTransition from '@/components/vue-route-transition'
36+
Vue.use(RouteTransition)
37+
3438
import utils from 'assets/utils/utils'
3539
Vue.use(utils)
3640

@@ -53,10 +57,11 @@ MHPreferenceSettingHelper.initialize()
5357

5458

5559
// 记录样式
56-
router.afterEach((to, from) => {
60+
router.beforeEach((to, from,next) => {
5761
// ...
58-
// console.log('afterEach-to', to)
59-
// console.log('afterEach-from', from)
62+
console.log('beforeEach-to', to)
63+
console.log('beforeEach-from', from)
64+
next()
6065
})
6166

6267
new Vue({

‎src/router.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ import LanguagePicker from './views/login/languagePicker/LanguagePicker.vue';
4444

4545
// 主页
4646
const Homepage = Homepage => require(['./views/homepage/Homepage.vue'], Homepage)
47-
47+
// 主页
48+
const button = button => require(['./views/homepage/button.vue'], button)
49+
// 主页
50+
const rate = rate => require(['./views/homepage/rate.vue'], rate)
4851
// 聊天页面
4952
const ChatMessage = ChatMessage => require(['./views/mainframe/chat/ChatMessage.vue'], ChatMessage)
5053

@@ -71,6 +74,14 @@ export default new Router({
7174
keepAlive: true
7275
},
7376
children: [
77+
{
78+
path: 'button',
79+
name: 'button',
80+
component: button,
81+
meta: {
82+
keepAlive: true
83+
},
84+
},
7485
{
7586
path: 'mainframe',
7687
name: 'mainframe',
@@ -103,10 +114,21 @@ export default new Router({
103114
keepAlive: true
104115
},
105116
},
106-
{ path: '', redirect: '/homepage/mainframe' }
117+
{ path: '', redirect: '/homepage/button',
118+
meta: {
119+
keepAlive: true
120+
},}
107121
],
108122

109123
},
124+
{
125+
path: '/rate',
126+
name: 'rate',
127+
component: rate,
128+
meta: {
129+
keepAlive: false
130+
}
131+
},
110132
{
111133
path: '/chat-message',
112134
name: 'ChatMessage',

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /