title: Update animation before transition Vue.js
body: <p>I'm building a site using Vue Js and I want to transition between router-views. There are many different possible for the transition depending from to which screen you go (for example a fade in or a slide in). I want to use a switch statement for all the possible combinations, it is working however it updates after the transition, so it's always one way behind. How can I update the transition before the route updates based on <code>from</code> and <code>to</code>? My current code in <code>App.vue</code>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="app"&gt;
      &lt;div class="app--wrapper"&gt;
        &lt;transition :name="transitionAnimation"&gt;
          &lt;router-view name="login"&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
        &lt;transition :name="transitionAnimation"&gt;
          &lt;router-view name="dashboard"&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
        &lt;transition :name="transitionAnimation"&gt;
          &lt;router-view name="moviedetail"&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
        &lt;transition :name="transitionAnimation"&gt;
          &lt;router-view name="watched"&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
        &lt;transition :name="transitionAnimation"&gt;
          &lt;router-view name="savedlist"&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
        &lt;transition :name="transitionAnimation"&gt;
          &lt;router-view name="profile"&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
      &lt;Navigation&gt;&lt;/Navigation&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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;
          }
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>