cookbook/custom-transitions.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ionic v4 + Vue.js - Custom transitions</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <!-- Disable Ionic transitions -->
        <script>window.disableIonicTransitions = true</script>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
        <script src="https://unpkg.com/vue-property-decorator@latest/lib/vue-property-decorator.umd.js"></script>
        <script src="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
        <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css"/>
        <style>
            .fade-enter-active, .fade-leave-active {
                transition: opacity .3s ease;
            }
            .fade-enter, .fade-leave-to {
                opacity: 0;
            }
        </style>
    </head>

    <body>
        <ion-app>
            <ion-vue-router></ion-vue-router>
        </ion-app>

        <script>
            const Toolbar = Vue.component('Toolbar', {
                name: 'Toolbar',
                props: { title: String, backURL: String },
                template: `<ion-header>
                    <ion-toolbar>
                        <ion-buttons slot="start">
                            <ion-back-button :default-href="backURL"/>
                        </ion-buttons>
                        <ion-title>{{ title }}</ion-title>
                    </ion-toolbar>
                </ion-header>`
            })

            const Home = {
                template: `<transition name="fade">
                    <ion-page class="ion-page">
                        <toolbar title="Home"/>
                        <ion-content class="ion-content" padding>
                            <router-link to="/page">Go to page</router-link>
                        </ion-content>
                    </ion-page>
                </transition>`
            }

            const Page = {
                template: `<transition name="fade">
                    <ion-page class="ion-page">
                        <toolbar title="Page" backURL="/"/>
                        <ion-content class="ion-content" padding>
                            <ion-button @click="goHome">Go home</ion-button>
                        </ion-content>
                    </ion-page>
                </transition>`,
                methods: {
                    goHome() {
                        this.$router.back()
                    }
                }
            }

            Vue.config.ignoredElements.push(/^ion-/)

            new Vue({
                router: new IonicVue.IonicVueRouter({
                    routes: [
                        { path: '/', component: Home },
                        { path: '/page', component: Page },
                    ],
                }),
            }).$mount('ion-app')
        </script>
    </body>
</html>