title: Vue.js transition doesn't apply on page first load
body: <p>I have a navbar with links that switch between two components.<br />
  I've got a fade-in animation for the switching, but it wouldn't run when you first open the page (it runs only when you use the navbar links to switch the components).<br />
  Is there any way to overcome this?</p>
  
  <p>P.S. The components are just <code>&lt;h1&gt;Home&lt;/h1&gt;</code> and <code>&lt;h1&gt;About&lt;/h1&gt;</code>.</p>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;transition name="view"&gt;
        &lt;router-view/&gt;
    &lt;/transition&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>JS (Router):</b></p>
  
  <pre><code>Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        redirect: { name: 'home-route' }
      },
      {
        path: '/home',
        name: 'home-route',
        component: HomeComponent
      },
      {
        path: '/about',
        name: 'about-route',
        component: AboutComponent
      }
    ]
  })
  </code></pre>
  
  <p><b>CSS (Animation):</b></p>
  
  <pre><code>.view-leave-active {
      transition: opacity 0.5s ease-in-out, transform 0.5s ease;
  }
  
  .view-enter-active {
      transition: opacity 0.5s ease-in-out, transform 0.5s ease;
      transition-delay: 0.5s;
  }
  
  .view-enter, .view-leave-to {
      opacity: 0;
  }
  
  .view-enter-to, .view-leave {
      opacity: 1;
  }
  </code></pre>