Vue 页面 动画切换

在store>index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        AnimationType: ''
    },
    mutations: {
        SET_TRANSITION: (state, ChangeAnimation) => {
            console.log(ChangeAnimation)
            state.AnimationType = ChangeAnimation
        },
    },
    actions: {
        setTransition({
            commit
        }, setTransitionType) {
            commit('SET_TRANSITION', setTransitionType)
        },
    },
    modules: {}
})

APP.js

<template>
    <div id="app">
        <transition :name="this.$store.state.AnimationType">
            <router-view />
        </transition>
    </div>
</template>
<script>
    export default {
        mounted() {

        },
        watch: {
            $route(to, from) {
                //如果to索引大于from索引,判断为前进状态,反之则为后退状态
                if (to.meta.index > from.meta.index) {
                    //设置动画名称
                    this.$store.dispatch('setTransition', "turn-on")
                } else {
                    this.$store.dispatch('setTransition', "turn-off")
                }

            }
        }

    }
</script>
<style>
    .turn-on-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .turn-on-leave-to {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    .turn-on-enter-active,
    .turn-on-leave-active {
        transition: all 500ms;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;right: 0;
    }

    .turn-off-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .turn-off-leave-to {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    .turn-off-enter-active,
    .turn-off-leave-active {
        transition: all 500ms;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;right: 0;
    }

    .turn-off-leave-active {
        z-index: 9999;
    }
</style>

router>index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import demo from "../views/demo.vue"
Vue.use(VueRouter)

const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
        meta:{
            index:"1"
        }
    },{
        path: '/demo',
        name: 'demo',
        component: demo,
        meta:{
            index:"2"
        }
    }

]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router