vue 利用vuex实现切换页面的动画效果

1.首先需要 在vuex中初始化一个state属性,默认为true;

export default {
    state: {
  //初始化一个默认值
        isBack: true,
    }
}

2. 再到mutations里面创建修改isBack属性值的方法;

  export default {
    state: {
        isBack: true,
    },
    mutations: { 
      //这个方法用于修改state里面isBack属性的值
        isBack(a, n) {
            a.isBack = n
        }
    },
}

3.最后需要在vuex里面创建异步修改isBack的方法

  export default {
    state: {
        isBack: true,
    },
    mutations: { 
      //这个方法用于修改state里面isBack属性的值
        isBack(a, n) {
            a.isBack = n
        }
    },
   actions: {
        isBack({ commit }) {
            //在100毫秒后修改isBack的值为true
            setTimeout(() => {
                commit('isBack', true)
            }, 100);
        }
    }
}

到这里仓库层就写OK了,接下来需要的就是transition组件配合

4.需要动画切换的地方用 <transition> 组件,并添加上name属性和值

<transition :name="aa">
    <router-view class="Router"/>
</transition>

5.写CSS样式

.Router {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.6s ease;
    top: 0;
}
.slide-left-enter,
.slide-right-leave-active {
    /* opacity: 0; */
    transform: translate(100%, 0);
}

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

6.在当前组件内添加方法,监听isBack的状态

import { mapState } from "vuex";
export default {
    data() {
        return {
            aa: "slide-left",
        };
    },
        watch: {
        isBack(a, b) {
            if (a) {
                this.aa = "slide-left";
            } else {
                this.aa = "slide-right";
                this.store.dispatch('isBack')
            }
        }
    },
    computed: {
        ...mapState(["isBack"])
    },

7.到这里已经算是大功告成了,就是需要在前进后退的地方改变isBack的值

  this.store.commit("isBack", false);

实现的方法千千万,总有一个适合你.