<template>
    <div id="app">
        <transition :name="moveName" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    // @ is an alias to /src
    export default {
        name: "app",
        data() {
            return {
                moveName: '',   // 动画名称
            };
        },
        /**
         * 路由监听
         * @param to
         * @param from
         */
        watch: {
            '$route'(to, from) {
                if (to.meta.index < from.meta.index) {
                    this.moveName = 'move-right';
                } else {
                    this.moveName = 'move-left';
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }

    .md-popup{
        height: 100vh !important;
    }

    /*过度动画定义*/
   .move-left-enter {
       transform: translate(100%);
   }

    .move-left-enter-active {
        transition: all .2s ease;
    }

    .move-left-leave-active {
        transform: translate(-100%);
        transition: all .2s ease;
    }

    .move-right-enter {
        transform: translate(-100%);
    }

    .move-right-enter-active {
        transition: all .2s ease;
    }

    .move-right-leave-active {
        transform: translate(100%);
        transition: all .2s ease;
    }
</style>
