Skip to content

Commit ebeb11c

Browse files
michaeltintiucmichaeltintiuc
authored
Mixed transitions (#20)
* Mix ionic and vue transitions
1 parent ba2f254 commit ebeb11c

File tree

5 files changed

+138
-37
lines changed

5 files changed

+138
-37
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ It is an extension of the Vue Router thus it can be used as a drop-in replacemen
9696
- [Named views with transitions](cookbook/named-views-transitions.html)
9797
- [IonNav routing](cookbook/ion-nav-routing.html)
9898
- [Custom transitions](cookbook/custom-transitions.html)
99+
- [Mix Ionic and custom transitions](cookbook/mixed-transitions.html)
99100

100101
## Developing
101102

‎cookbook/mixed-transitions.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ionic v4 + Vue.js - Mixed transitions</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="format-detection" content="telephone=no">
8+
<meta name="msapplication-tap-highlight" content="no">
9+
<script src="https://unpkg.com/vue"></script>
10+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
11+
<script src="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
12+
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.2/dist/ionic.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.2/css/ionic.min.css"/>
14+
<style>
15+
/* hide the nasty black BG on ios */
16+
.show-decor .nav-decor {
17+
background: transparent !important;
18+
}
19+
.slide-enter-active, .slide-leave-active {
20+
transition: margin 1s ease;
21+
}
22+
.slide-enter, .slide-leave-to {
23+
margin-top: 1000px;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<ion-app>
30+
<ion-vue-router></ion-vue-router>
31+
</ion-app>
32+
33+
<script>
34+
const Toolbar = Vue.component('Toolbar', {
35+
name: 'Toolbar',
36+
props: { title: String, backURL: String },
37+
template: `<ion-header>
38+
<ion-toolbar>
39+
<ion-buttons slot="start">
40+
<ion-back-button :default-href="backURL"/>
41+
</ion-buttons>
42+
<ion-title>{{ title }}</ion-title>
43+
</ion-toolbar>
44+
</ion-header>`
45+
})
46+
47+
const Home = {
48+
template: `<transition name="slide"><ion-page class="ion-page">
49+
<toolbar title="Home"/>
50+
<ion-content class="ion-content" padding>
51+
<router-link to="/page">Go to page</router-link>
52+
</ion-content>
53+
</ion-page></transition>`
54+
}
55+
56+
const Page = {
57+
template: `<transition name="slide">
58+
<ion-page class="ion-page">
59+
<toolbar title="Page" backURL="/"/>
60+
<ion-content class="ion-content" padding>
61+
<ion-button @click="goHome">Go home</ion-button>
62+
</ion-content>
63+
</ion-page>
64+
</transition>`,
65+
methods: {
66+
goHome() {
67+
this.$router.back()
68+
}
69+
}
70+
}
71+
72+
Vue.config.ignoredElements.push(/^ion-/)
73+
74+
new Vue({
75+
router: new IonicVue.IonicVueRouter({
76+
routes: [
77+
{ path: '/', component: Home },
78+
{ path: '/page', meta: { customTransition: true }, component: Page },
79+
],
80+
}),
81+
}).$mount('ion-app')
82+
</script>
83+
</body>
84+
</html>

‎src/components/ion-vue-router.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
<ion-router-outlet
33
ref="ionRouterOutlet"
44
@click="catchIonicGoBack">
5+
<router-view
6+
v-if="customTransition"
7+
:name="name"/>
58
<transition
9+
v-else
610
:css="bindCSS"
711
mode="in-out"
812
@before-enter="beforeEnter"
@@ -52,12 +56,17 @@ export default {
5256
5357
// Flag to see if we're still in a transition
5458
inTransition: false,
59+
60+
customTransition: false,
5561
}
5662
},
5763
created() {
5864
// Cancel navigation if there's a running transition
5965
this.$router.beforeEach((to, from, next) => {
60-
return next(!this.inTransition)
66+
this.customTransition = to.meta.customTransition || false
67+
return this.$nextTick(() => {
68+
return next(!this.inTransition)
69+
})
6170
})
6271
},
6372
methods: {

‎test/ion-vue-router-transitionless.spec.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Vue from 'vue'
2+
import Router from '../src/router.js'
3+
import IonVueRouterTransitionless from '../src/components/ion-vue-router-transitionless.vue'
4+
5+
Vue.use(Router)
6+
7+
describe('IonVueRouter', () => {
8+
it('Catches back button click event', () => {
9+
const constructor = Vue.extend(IonVueRouterTransitionless)
10+
const component = new constructor({ router: new Router({ mode: 'abstract' }) })
11+
12+
expect(component.catchIonicGoBack({})).toBeFalsy()
13+
14+
component.$router.push('/')
15+
component.$router.push('/foo')
16+
expect(component.$route.fullPath).toBe('/foo')
17+
18+
// Go back
19+
component.catchIonicGoBack(mockBackEvent('/'))
20+
expect(component.$route.fullPath).toBe('/')
21+
22+
// Should not go back
23+
component.catchIonicGoBack(mockBackEvent())
24+
expect(component.$route.fullPath).toBe('/')
25+
26+
// Go back to default route
27+
component.catchIonicGoBack(mockBackEvent('/bar'))
28+
expect(component.$route.fullPath).toBe('/bar')
29+
})
30+
})
31+
32+
function mockBackEvent(route) {
33+
return {
34+
target: {
35+
closest() {
36+
return {
37+
defaultHref: route,
38+
}
39+
},
40+
},
41+
preventDefault() {},
42+
}
43+
}

‎test/ion-vue-router.spec.js

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -57,29 +57,6 @@ describe('IonVueRouter', () => {
5757
expect(component.name).toBe('default')
5858
})
5959

60-
it('Catches back button click event', () => {
61-
const constructor = Vue.extend(IonVueRouter)
62-
const component = new constructor({ router: new Router({ mode: 'abstract' }) })
63-
64-
expect(component.catchIonicGoBack({})).toBeFalsy()
65-
66-
component.$router.push('/')
67-
component.$router.push('/foo')
68-
expect(component.$route.fullPath).toBe('/foo')
69-
70-
// Go back
71-
component.catchIonicGoBack(mockBackEvent('/'))
72-
expect(component.$route.fullPath).toBe('/')
73-
74-
// Should not go back
75-
component.catchIonicGoBack(mockBackEvent())
76-
expect(component.$route.fullPath).toBe('/')
77-
78-
// Go back to default route
79-
component.catchIonicGoBack(mockBackEvent('/bar'))
80-
expect(component.$route.fullPath).toBe('/bar')
81-
})
82-
8360
it('Transitions correctly', () => {
8461
expect.assertions(3)
8562

@@ -191,16 +168,3 @@ function mockIonRouterOutlet() {
191168
},
192169
}
193170
}
194-
195-
function mockBackEvent(route) {
196-
return {
197-
target: {
198-
closest() {
199-
return {
200-
defaultHref: route,
201-
}
202-
},
203-
},
204-
preventDefault() {},
205-
}
206-
}

0 commit comments

Comments
 (0)