在转换Vue.js之前更新动画

Question

我正在使用Vue Js构建一个站点，我想在路由器视图之间进行转换。根据您去哪个屏幕（例如淡入或滑入），转换有许多不同的可能性。我想对所有可能的组合使用switch语句，它正在工作但是在转换后它会更新，所以它总是落后一步。如何根据from和to更新路线更新之前的转换？我目前在App.vue中的代码：

<template>
  <div class="app">
    <div class="app--wrapper">
      <transition :name="transitionAnimation">
        <router-view name="login"></router-view>
      </transition>
      <transition :name="transitionAnimation">
        <router-view name="dashboard"></router-view>
      </transition>
      <transition :name="transitionAnimation">
        <router-view name="moviedetail"></router-view>
      </transition>
      <transition :name="transitionAnimation">
        <router-view name="watched"></router-view>
      </transition>
      <transition :name="transitionAnimation">
        <router-view name="savedlist"></router-view>
      </transition>
      <transition :name="transitionAnimation">
        <router-view name="profile"></router-view>
      </transition>
    </div>
    <Navigation></Navigation>
  </div>
</template>

<script>
import Navigation from './components/Navigation'

export default {
  name: 'app',
  components: {
    Navigation
  },
  data() {
    return {
      transitionAnimation: 'fade'
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'dashboard') {
        switch(from.name) {
          case 'watched': this.transitionAnimation = 'slide'; break;
        }
      }
    }
  }
}
</script>