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 01cc0c1

Browse files
路由过度东湖a
1 parent 200e69d commit 01cc0c1

File tree

5 files changed

+394
-23
lines changed

5 files changed

+394
-23
lines changed
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="vue-route-transition__wrapper">
3+
<header>
4+
<slot name="header"></slot>
5+
</header>
6+
<main class="vue-route-transition__content" :id="cId">
7+
<slot></slot>
8+
</main>
9+
<footer>
10+
<slot name="footer"></slot>
11+
</footer>
12+
</div>
13+
</template>
14+
<script>
15+
export default {
16+
name: "vue-route-layout",
17+
props: {
18+
id: String
19+
},
20+
data() {
21+
return {
22+
cId: this.id || this.$route.path.replace(/\//g, "_") || "_null_"
23+
};
24+
},
25+
activated() {
26+
console.log("🔥🔥 cID " + this.cId);
27+
console.log("🔥🔥 ID " + this.id);
28+
console.log("🔥🔥 path " + this.$route.path);
29+
}
30+
};
31+
</script>
32+
33+
<style scoped>
34+
.vue-route-transition__wrapper {
35+
background: #fff;
36+
position: absolute;
37+
width: 100%;
38+
height: 100%;
39+
display: -webkit-box;
40+
display: -webkit-flex;
41+
display: flex;
42+
-webkit-flex-flow: column nowrap;
43+
flex-flow: column nowrap;
44+
}
45+
46+
.vue-route-transition__content {
47+
width: 100%;
48+
height: 100%;
49+
-webkit-box-flex: 1;
50+
-webkit-flex: 1;
51+
flex: 1;
52+
overflow-y: auto;
53+
overflow-x: hidden;
54+
-webkit-overflow-scrolling: touch;
55+
position: relative;
56+
}
57+
</style>
Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<template>
2+
<div class="vue-route-transition">
3+
<transition :name="state.pageDirection" @leave="setRouterMap">
4+
<keep-alive
5+
v-if="this.keepAlive === true && $route.meta.keepAlive !== false"
6+
>
7+
<router-view></router-view>
8+
</keep-alive>
9+
<router-view v-else></router-view>
10+
</transition>
11+
</div>
12+
</template>
13+
<script>
14+
var localSessionRouteChain = sessionStorage.getItem("$$routeChain") || [];
15+
16+
export default {
17+
name: "vue-route-transition",
18+
props: {
19+
keepAlive: {
20+
type: Boolean,
21+
default: true
22+
}
23+
},
24+
data: function() {
25+
try {
26+
localSessionRouteChain =
27+
this.$route.path !== "/" ? JSON.parse(localSessionRouteChain) : [];
28+
} catch (error) {
29+
localSessionRouteChain = [];
30+
}
31+
return {
32+
state: {
33+
addCount: localSessionRouteChain.length,
34+
routerMap: {},
35+
pageDirection: "fade",
36+
routeChain: localSessionRouteChain
37+
}
38+
};
39+
},
40+
methods: {
41+
addRouteChain(route) {
42+
if (this.state.addCount === 0 && localSessionRouteChain.length > 0) {
43+
// 排除刷新的时候
44+
this.state.addCount = 1;
45+
} else {
46+
if (
47+
(this.state.addCount !== 0 &&
48+
this.state.routeChain[this.state.routeChain.length - 1].path !==
49+
route.path) ||
50+
this.state.addCount === 0
51+
) {
52+
this.state.routeChain.push({
53+
path: route.path
54+
});
55+
sessionStorage.setItem(
56+
"$$routeChain",
57+
JSON.stringify(this.state.routeChain)
58+
);
59+
this.state.addCount++;
60+
}
61+
}
62+
},
63+
popRouteChain() {
64+
this.state.routeChain.pop();
65+
sessionStorage.setItem(
66+
"$$routeChain",
67+
JSON.stringify(this.state.routeChain)
68+
);
69+
},
70+
setPageDirection({ dir, to, from }) {
71+
this.state.pageDirection = dir;
72+
this.state.routerMap["to"] = to.path;
73+
this.state.routerMap["from"] = from.path;
74+
},
75+
setRouterMap() {
76+
let dir = this.state.pageDirection;
77+
let to = this.state.routerMap.to.replace(/\//g, "_");
78+
let from = this.state.routerMap.from.replace(/\//g, "_");
79+
console.log("setRouterMap", dir);
80+
console.log("setRouterMap", to);
81+
console.log("setRouterMap", from);
82+
try {
83+
if (dir === "slide-left") {
84+
// 进入
85+
this.state.routerMap[from] = document.getElementById(from).scrollTop;
86+
} else if (dir === "slide-right") {
87+
// 返回
88+
if (this.keepAlive === true && this.$route.meta.keepAlive !== false) {
89+
document.getElementById(to).scrollTop = this.state.routerMap[to];
90+
}
91+
} else {
92+
}
93+
} catch (error) {}
94+
}
95+
},
96+
mounted() {
97+
this.$router.beforeEach((to, from, next) => {
98+
console.log("🐴beforeEach");
99+
console.log(to);
100+
console.log(from);
101+
102+
// 定义一个可以记录路由路径变化的数据,这里用sessionStorage,或者在window.routeChain等变量
103+
let routeLength = this.state.routeChain.length;
104+
if (routeLength === 0 || this.state.addCount === 0) {
105+
this.setPageDirection({ dir: "slide-left", to, from });
106+
this.addRouteChain(from);
107+
this.addRouteChain(to);
108+
} else if (routeLength === 1) {
109+
this.setPageDirection({ dir: "slide-left", to, from });
110+
this.addRouteChain(to);
111+
} else {
112+
let lastBeforeRoute = this.state.routeChain[routeLength - 2];
113+
if (lastBeforeRoute.path === to.path && to.meta.slideLeft !== true) {
114+
this.popRouteChain();
115+
this.setPageDirection({ dir: "slide-right", to, from });
116+
} else {
117+
this.addRouteChain(to);
118+
this.setPageDirection({ dir: "slide-left", to, from });
119+
}
120+
}
121+
next();
122+
});
123+
},
124+
activated() {
125+
console.log("😁😁😁 " + this.state);
126+
}
127+
};
128+
</script>
129+
130+
<style lang="less">
131+
.vue-route-transition {
132+
position: absolute;
133+
width: 100%;
134+
height: 100%;
135+
display: flex;
136+
flex-direction: column;
137+
overflow: hidden;
138+
backface-visibility: hidden;
139+
perspective: 1000;
140+
}
141+
.fade-enter-active {
142+
animation: pageFadeIn 400ms forwards;
143+
}
144+
@keyframes pageFadeIn {
145+
from {
146+
opacity: 0;
147+
}
148+
to {
149+
opacity: 1;
150+
}
151+
}
152+
/*路由前进,退出*/
153+
154+
.slide-left-leave-active {
155+
animation: pageFromCenterToLeft 400ms forwards;
156+
z-index: 1;
157+
}
158+
159+
/*路由后退,进入*/
160+
161+
.slide-right-enter-active {
162+
animation: pageFromLeftToCenter 400ms forwards;
163+
z-index: 1;
164+
}
165+
166+
/*路由后退,退出*/
167+
168+
.slide-right-leave-active {
169+
animation: pageFromCenterToRight 400ms forwards;
170+
z-index: 10;
171+
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
172+
}
173+
174+
/*路由前进,进入*/
175+
176+
.slide-left-enter-active {
177+
animation: pageFromRightToCenter 400ms forwards;
178+
z-index: 10;
179+
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
180+
}
181+
182+
/*-------------------------------*/
183+
184+
/*路由前进,进入*/
185+
186+
@keyframes pageFromRightToCenter {
187+
from {
188+
/* left: 100%; */
189+
transform: translate3d(100%, 0, 0);
190+
opacity: 1;
191+
}
192+
to {
193+
/* left: 0; */
194+
transform: translate3d(0, 0, 0);
195+
opacity: 1;
196+
}
197+
}
198+
199+
/*路由前进,退出*/
200+
201+
@keyframes pageFromCenterToLeft {
202+
from {
203+
opacity: 1;
204+
transform: translate3d(0, 0, 0);
205+
/* left:0; */
206+
}
207+
to {
208+
opacity: 0.5;
209+
transform: translate3d(-20%, 0, 0);
210+
/* left:-20%; */
211+
}
212+
}
213+
214+
/*路由后退,进入*/
215+
216+
@keyframes pageFromLeftToCenter {
217+
from {
218+
opacity: 0.5;
219+
transform: translate3d(-20%, 0, 0);
220+
/* left: -20%; */
221+
}
222+
to {
223+
opacity: 1;
224+
transform: translate3d(0, 0, 0);
225+
/* left: 0; */
226+
}
227+
}
228+
229+
/*路由后退,退出*/
230+
231+
@keyframes pageFromCenterToRight {
232+
from {
233+
/* left: 0; */
234+
transform: translate3d(0, 0, 0);
235+
opacity: 1;
236+
}
237+
to {
238+
/* left: 100%; */
239+
transform: translate3d(100%, 0, 0);
240+
opacity: 1;
241+
}
242+
}
243+
</style>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import RouteTransition from './RouteTransition.vue'
2+
import RouteLayout from './RouteLayout.vue'
3+
4+
const install = function (Vue) {
5+
Vue.component(RouteTransition.name, RouteTransition)
6+
Vue.component(RouteLayout.name, RouteLayout)
7+
}
8+
9+
if (typeof window !== 'undefined' && window.Vue) {
10+
install(window.Vue)
11+
}
12+
13+
export default {
14+
install
15+
}

‎src/views/contacts/Contacts.vue‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,47 @@
11
<template>
22
<div class="_full-content _content-padding-top44 _content-padding-bottom49">
3-
<NavigationBar title="通讯录" :right-item="addFriendsItem" @right-click="rightItemDidClicked"></NavigationBar>
4-
5-
<!-- <transition
6-
name="custom-classes-transition"
7-
enter-active-class="animated tada"
8-
leave-active-class="animated bounceOutRight"
9-
>
10-
11-
</transition>-->
12-
<router-link to="/contacts/contact-info">Toggle render</router-link>
13-
<transition
14-
name="custom-classes-transition"
15-
enter-active-class="animated fadeInLeft"
16-
leave-active-class="animated fadeInRight"
17-
>
18-
<p v-if="show">hello</p>
19-
<router-view></router-view>
20-
</transition>
3+
<NavigationBar
4+
title="通讯录"
5+
:right-item="addFriendsItem"
6+
@right-click="rightItemDidClicked"
7+
></NavigationBar>
8+
<SlotTest>
9+
<!-- <div slot="header">我是头部</div>
10+
<div>我是默认</div>
11+
<div slot="footer">我是尾部</div> -->
12+
<template v-slot:header>
13+
<div slot="header">我是头部</div>
14+
</template>
15+
<template v-slot:default="slotProps">{{
16+
slotProps.user.lastName
17+
}}</template>
18+
<template v-slot:footer>
19+
<div>我是尾部</div>
20+
</template>
21+
</SlotTest>
2122
</div>
2223
</template>
2324

2425
<script>
2526
import NavigationBar from "../../components/navigationBar/NavigationBar";
2627
import MHBarButtonItem from "../../assets/js/MHBarButtonItem.js";
28+
import SlotTest from "./Slot";
2729
export default {
30+
name: "contact",
31+
components: {
32+
NavigationBar,
33+
SlotTest
34+
},
2835
data() {
2936
return {
37+
slotName: "CoderMikeHe",
3038
show: true,
3139
addFriendsItem: new MHBarButtonItem("", "nav_bar_addfriends", 1),
3240
enterAnimate: "", // 页面进入动效
3341
leaveAnimate: "" // 页面离开动效
3442
};
3543
},
36-
components: {
37-
NavigationBar
38-
},
44+
3945
methods: {
4046
rightItemDidClicked(index) {
4147
console.log(index);
@@ -45,5 +51,4 @@ export default {
4551
};
4652
</script>
4753

48-
<style lang="scss" scoped>
49-
</style>
54+
<style lang="scss" scoped></style>

0 commit comments

Comments
(0)

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