vue路由动画

文章来源：Vue-router结合transition实现app动画切换效果实例分享

VueRouter.prototype.goBack = function ()
{ 
　　this.isBack = true
　　window.history.go(-1)
}

<template>
    <div id="rv">
        <transition :name="transitionName">
            <router-view class="Router"></router-view>
        </transition>
    </div>
</template>

<script>
    export default
    {
        data()
        {
            var data = 
            {
                transitionName: ""
            }
            return data;
        },
        watch:
        {
            $route()
            {
                var isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
                if(isBack)
                {
                    this.transitionName = 'slide-right'
                }
                else if(this.$router.isBack != null)
                {
                    this.transitionName = 'slide-left'
                }
                this.$router.isBack = false
            }
        }
    }
</script>

<style>
    #rv{
        height: 100%;
    }
    .Router
    {
        position: absolute;
        width: 100%;
        transition: all ease 250ms;
    }
    .slide-left-enter,
    .slide-right-leave-active
    {
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter
    {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100% 0);
    }
</style>