vue中transition实现组件转场动画

App.vue里面

<transition name="app" mode="out-in">
	<router-view></router-view>   
</transition>

css中

<style lang="scss">
    .app-enter-active{ //组件进入的时候整个过程的动画
      animation: move .5s;
    }
    .app-leave-active{ //组件离开的时候整个过程的动画
      animation: move .5s reverse;
    }

    @keyframes move{
      0%{
        opacity: 0;
        transform: translateY(50px)
      }
      100%{
        opacity: 1;
        transform: translateY(0px)
      }
    }