vue项目中页面进入退出设置动画

<templete>
     <transition :name="transtationName">
         <router-view/>
    </transition>
</templete>

<script lang="ts">
 import { watch } from "vue-property-decorator"
 import { Route } from "vue-router";
 export default class App extends Vue {
 transitionName = "";
 @watch('$route')
 onRouteChange(Route ,Route ) {
   this.transitionName = to.mate.depth > from.meta.depth?'slide-left' : 'slide-right'
   }
}
</script>
<style lang='scss'>
.slide-left-enter,
.slide-left-leave,
.slide-right-enter,
.slide-right-leave{
   //提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
    will-change: transform;
    transition: transform 350ms;
    position: absolute;
    overflow: hidden;
}
.slide-right-enter,
.slide-left-leave-active{
    transform:translate(-100%,0)
}
.slide-left-enter,
.slide-right-leave-active{
     transform:translate(0,-100%)
}
</style>