mteacher/src/App.vue

<template>
  <div id="app">
    <transition name="fade">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
    </transition>
    <transition name="fade">
        <router-view v-if="!$route.meta.keepAlive"/>
    </transition>
  </div>
</template>

<style lang="less">
@import url('./assets/commonLess/common');
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F3F4F8;
    overflow-x: hidden;
    overflow-y: auto;
    user-select: none;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  -webkit-will-change: transform;
  will-change: transform;
  transition: all 500ms;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>