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 cd7155e

Browse files
更改动画
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)

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