title: Vue Transition on Element When Route Changes
body: <h1>Context:</h1>
  
  <p>I have a navigation component which is present on every page but there is a logo element in that component which I am removing based on what route the user is at. I want to add a transition effect to this element when it disappears/appears and I have tried to do so using Vue transitions as you can see down below. </p>
  
  <h2>Problem is:</h2>
  
  <p>Element only fades in when <code>this.header</code> goes from false to true - whenever it goes from true to false no animation happens. </p>
  
  <p>You can look at the problem for yourself in this <a href="https://codesandbox.io/s/mzpw4rkn9y" rel="nofollow noreferrer">code sandbox</a></p>
  
  <h2>Sidenote:</h2>
  
  <p>The CSS is not the problem. I know this because the desired effect works perfectly well if I instead trigger it using a button. The problem seems to have something to do with the nature of using a router change to trigger the animation. Do any of you have any idea why this would be the case? </p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="headerNav"&gt;
  
        &lt;transition name="fade"&gt;
          &lt;div class="logo" v-if="!this.logo"&gt;&lt;/div&gt;
        &lt;/transition&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'Navbar',
      components: {
        postFilter,
      },
      data() {
        return {
          logo: null,
        }
      },
      mounted() {
        //changing around the header depending on the page we are on so that we can use one header for all pages
        if (this.$route.name == 'Library' || this.$route.name == 'Profile') {
          this.logo = false
        } else {
          this.logo = true
        }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>The CSS (this should not be a problem but I included it anyway)</p>
  
  <pre><code>.fade-enter-active {   
      transition: all .3s ease; 
  } 
  .fade-leave-active {   
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); 
  } 
  .fade-enter, .fade-leave-to {   
      transform: translateY(10px);   opacity: 0; 
  }
  </code></pre>