Skip to content

Commit cd7155e

Browse files
CoderMikeHeCoderMikeHe
committed
更改动画
1 parent b105726 commit cd7155e

File tree

1 file changed

+190
-81
lines changed

1 file changed

+190
-81
lines changed

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

Lines changed: 190 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,58 @@
11
<template>
22
<!-- https://www.cnblogs.com/mmzuo-798/p/10712009.html -->
33
<div class="vue-route-transition">
4-
<transition :name="pageDirection">
5-
<keep-alive v-show="$route.meta.keepAlive">
6-
<router-view :kkk="pageDirection" id="mmnn"></router-view>
4+
<!-- <transition :name="state.pageDirection" @leave="setRouterMap">
5+
<keep-alive v-if="this.keepAlive===true && $route.meta.keepAlive!==false">
6+
<router-view></router-view>
7+
</keep-alive>
8+
<router-view v-else></router-view>
9+
</transition> -->
10+
<!-- <transition :name="state.pageDirection" @leave="setRouterMap">
11+
<keep-alive>
12+
<router-view
13+
v-if="keepAlive === true && $route.meta.keepAlive !== false"
14+
></router-view>
715
</keep-alive>
816
</transition>
9-
<transition :name="pageDirection">
17+
<transition :name="state.pageDirection" @leave="setRouterMap">
1018
<router-view
11-
:kkk="pageDirection"
12-
id="xxoo"
13-
v-show="$route.meta.keepAlive === false"
19+
v-if="keepAlive === false || $route.meta.keepAlive === false"
1420
></router-view>
15-
</transition>
16-
<!-- <transition :name="state.pageDirection" @leave="setRouterMap">
17-
<div class="abc" v-if="$route.meta.keepAlive !== false" key="xx">
18-
<keep-alive>
19-
<router-view></router-view>
20-
</keep-alive>
21-
</div>
22-
<div class="abc" v-if="$route.meta.keepAlive === false" key="oo">
23-
<router-view></router-view>
24-
</div>
2521
</transition> -->
22+
<transition
23+
v-on:before-enter="beforeEnter"
24+
v-on:enter="enter"
25+
v-on:after-enter="afterEnter"
26+
v-on:before-leave="beforeLeave"
27+
v-on:leave="leave"
28+
v-on:after-leave="afterLeave"
29+
v-bind:css="false"
30+
>
31+
<keep-alive>
32+
<router-view
33+
v-if="keepAlive === true && $route.meta.keepAlive !== false"
34+
></router-view>
35+
</keep-alive>
36+
</transition>
37+
<transition
38+
v-on:before-enter="beforeEnter"
39+
v-on:enter="enter"
40+
v-on:after-enter="afterEnter"
41+
v-on:before-leave="beforeLeave"
42+
v-on:leave="leave"
43+
v-on:after-leave="afterLeave"
44+
v-bind:css="false"
45+
>
46+
<router-view
47+
v-if="keepAlive === false || $route.meta.keepAlive === false"
48+
></router-view>
49+
</transition>
50+
<!-- <transition-group :name="state.pageDirection" @leave="setRouterMap">
51+
<keep-alive :key="1234">
52+
<router-view :key="2134" v-if="this.keepAlive===true && $route.meta.keepAlive!==false"></router-view>
53+
</keep-alive>
54+
<router-view :key="234" v-if="this.keepAlive===false || $route.meta.keepAlive===false"></router-view>
55+
</transition-group> -->
2656
</div>
2757
</template>
2858
<script>
@@ -46,7 +76,6 @@ export default {
4676
localSessionRouteChain = [];
4777
}
4878
return {
49-
pageDirection: "fade",
5079
state: {
5180
addCount: localSessionRouteChain.length,
5281
routerMap: {},
@@ -56,6 +85,131 @@ export default {
5685
};
5786
},
5887
methods: {
88+
// --------
89+
// 进入中
90+
// --------
91+
92+
beforeEnter: function(el) {
93+
// ...
94+
console.log("beforeEnter", el);
95+
console.log(this.state.pageDirection);
96+
97+
let dir = this.state.pageDirection;
98+
if (dir === "slide-left") {
99+
// 进入
100+
// el.style.transform = 'translate(100%, 0)'
101+
} else if (dir === "slide-right") {
102+
// 返回
103+
// el.style.transform = 'translate(-20%, 0)'
104+
} else {
105+
// fade
106+
}
107+
108+
console.log(el.style.transform);
109+
console.log("-----------------");
110+
},
111+
// 当与 CSS 结合使用时
112+
// 回调函数 done 是可选的
113+
enter: function(el, done) {
114+
// ...
115+
console.log("enter", el);
116+
console.log(this.state.pageDirection);
117+
console.log("-----------------");
118+
// eslint-disable-next-line no-unused-expressions
119+
el.offsetWidth;
120+
let dir = this.state.pageDirection;
121+
if (dir === "slide-left") {
122+
// 进入
123+
// el.style.transform = 'translate(0, 0)'
124+
// el.style.transition = 'all 0.4s'
125+
el.style.animation = "pageFromRightToCenter 5000ms forwards";
126+
el.style.zIndex = "10";
127+
el.style.boxShadow = " -3px 0 5px rgba(0, 0, 0, 0.1)";
128+
} else if (dir === "slide-right") {
129+
// 返回
130+
// el.style.transform = 'translate(0, 0)'
131+
// el.style.transition = 'transform 0.4s'
132+
el.style.animation = "pageFromLeftToCenter 5000ms forwards";
133+
el.style.zIndex = "1";
134+
} else {
135+
// fade
136+
}
137+
setTimeout(() => {
138+
done();
139+
}, 5000);
140+
// done()
141+
},
142+
afterEnter: function(el) {
143+
// ...
144+
console.log("afterEnter", el);
145+
console.log(this.state.pageDirection);
146+
console.log("-----------------");
147+
},
148+
149+
// --------
150+
// 离开时
151+
// --------
152+
153+
beforeLeave: function(el) {
154+
// ...
155+
console.log("beforeLeave", el);
156+
console.log(this.state.pageDirection);
157+
console.log("-----------------");
158+
159+
let dir = this.state.pageDirection;
160+
if (dir === "slide-left") {
161+
// 进入
162+
// el.style.transform = 'translate(0, 0)'
163+
} else if (dir === "slide-right") {
164+
// 返回
165+
// el.style.transform = 'translate(0, 0)'
166+
} else {
167+
// fade
168+
}
169+
},
170+
// 当与 CSS 结合使用时
171+
// 回调函数 done 是可选的
172+
leave: function(el, done) {
173+
// ...
174+
console.log("leave", el);
175+
console.log(this.state.pageDirection);
176+
let dir = this.state.pageDirection;
177+
let to = this.state.routerMap.to.replace(/\//g, "_");
178+
let from = this.state.routerMap.from.replace(/\//g, "_");
179+
console.log("setRouterMap", dir);
180+
console.log("setRouterMap", to);
181+
console.log("setRouterMap", from);
182+
console.log("-----------------");
183+
// eslint-disable-next-line no-unused-expressions
184+
el.offsetWidth;
185+
if (dir === "slide-left") {
186+
// el.style.transform = 'translate(-100%, 0)'
187+
// el.style.transition = 'all 0.4s'
188+
el.style.animation = "pageFromCenterToLeft 5000ms forwards";
189+
el.style.zIndex = "1";
190+
} else if (dir === "slide-right") {
191+
// 返回
192+
// el.style.transform = 'translate(100%, 0)'
193+
// el.style.transition = 'all 0.4s'
194+
el.style.animation = "pageFromCenterToRight 5000ms forwards";
195+
el.style.boxShadow = " -3px 0 5px rgba(0, 0, 0, 0.1)";
196+
el.style.zIndex = "10";
197+
} else {
198+
// fade
199+
}
200+
201+
setTimeout(() => {
202+
done();
203+
}, 5000);
204+
// done()
205+
},
206+
afterLeave: function(el) {
207+
// ...
208+
console.log("afterLeave", el);
209+
console.log(this.state.pageDirection);
210+
console.log("-----------------");
211+
},
212+
59213
addRouteChain(route) {
60214
console.log("addRouteChain - ", this.state.addCount);
61215
console.log("addRouteChain - ", localSessionRouteChain.length);
@@ -93,7 +247,6 @@ export default {
93247
},
94248
setPageDirection({ dir, to, from }) {
95249
this.state.pageDirection = dir;
96-
this.pageDirection = dir;
97250
this.state.routerMap["to"] = to.path;
98251
this.state.routerMap["from"] = from.path;
99252
},
@@ -119,48 +272,6 @@ export default {
119272
} else {
120273
}
121274
} catch (error) {}
122-
},
123-
// --------
124-
// 进入中
125-
// --------
126-
127-
beforeEnter: function(el) {
128-
// ...
129-
console.log("beforeEnter", el);
130-
},
131-
// 当与 CSS 结合使用时
132-
// 回调函数 done 是可选的
133-
enter: function(el, done) {
134-
// ...
135-
console.log("enter", el);
136-
137-
done();
138-
},
139-
afterEnter: function(el) {
140-
// ...
141-
// ...
142-
console.log("afterEnter", el);
143-
},
144-
145-
// --------
146-
// 离开时
147-
// --------
148-
beforeLeave: function(el) {
149-
// ...
150-
console.log("beforeLeave", el);
151-
},
152-
// 当与 CSS 结合使用时
153-
// 回调函数 done 是可选的
154-
leave: function(el, done) {
155-
console.log("leave", el);
156-
157-
// ...
158-
done();
159-
},
160-
afterLeave: function(el) {
161-
console.log("leaafterLeaveve", el);
162-
163-
// ...
164275
}
165276
},
166277
mounted() {
@@ -203,25 +314,22 @@ export default {
203314
});
204315
},
205316
created() {
206-
console.log("created😁😁😁 ", this.$route.meta);
207-
console.log("created😁😁😁 ", this.state);
317+
// console.log('created😁😁😁 ', this.$route.meta)
318+
// console.log('created😁😁😁 ', this.state)
208319
},
209320
activated() {
210-
console.log("activated😁😁😁 ", this.$route.meta);
211-
console.log("activated😁😁😁 ", this.state);
321+
// console.log('activated😁😁😁 ', this.$route.meta)
322+
// console.log('activated😁😁😁 ', this.state)
212323
}
213324
};
214325
</script>
215326

216-
<style scoped></style>
217-
218-
<style scoped>
219-
.abc {
220-
position: absolute;
327+
<style lang="less">
328+
html,
329+
body {
221330
width: 100%;
222331
height: 100%;
223332
}
224-
/* 子绝父相 */
225333
.vue-route-transition {
226334
position: absolute;
227335
width: 100%;
@@ -232,9 +340,8 @@ export default {
232340
backface-visibility: hidden;
233341
perspective: 1000;
234342
}
235-
236343
.fade-enter-active {
237-
animation: pageFadeIn 400ms forwards;
344+
animation: pageFadeIn 5000ms forwards;
238345
}
239346
@keyframes pageFadeIn {
240347
from {
@@ -245,27 +352,28 @@ export default {
245352
}
246353
}
247354
355+
/*路由前进，退出*/
356+
.slide-left-leave-active {
357+
animation: pageFromCenterToLeft 5000ms forwards;
358+
z-index: 1;
359+
}
360+
248361
/*路由后退，进入*/
249362
.slide-right-enter-active {
250-
animation: pageFromLeftToCenter 10000ms forwards;
363+
animation: pageFromLeftToCenter 5000ms forwards;
251364
z-index: 1;
252365
}
253366
254367
/*路由后退，退出*/
255368
.slide-right-leave-active {
256-
animation: pageFromCenterToRight 10000ms forwards;
369+
animation: pageFromCenterToRight 5000ms forwards;
257370
z-index: 10;
258371
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
259372
}
260373
261-
/*路由前进，退出*/
262-
.slide-left-leave-active {
263-
animation: pageFromCenterToLeft 10000ms forwards;
264-
z-index: 9;
265-
}
266374
/*路由前进，进入*/
267375
.slide-left-enter-active {
268-
animation: pageFromRightToCenter 10000ms forwards;
376+
animation: pageFromRightToCenter 5000ms forwards;
269377
z-index: 10;
270378
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
271379
}
@@ -288,6 +396,7 @@ export default {
288396
}
289397
290398
/*路由前进，退出*/
399+
291400
@keyframes pageFromCenterToLeft {
292401
from {
293402
opacity: 1;

0 commit comments

Comments
 (0)