Vue.jsとanimete.cssでアニメーション ref: http://qiita.com/nukosuke/items/548dbee9cc715e5dfb32

file0.txt

$ npm install vue vue-router --save

file1.txt

    script(id='page-1' type='x-template')
      .page
        h1 ページ１
        img(src='img/page-1.gif' alt='page-1')

file2.js

components.p1 = Vue.component('page-1', {
  template: '#page-1'
});

file3.txt

/* アニメーション */
// 表示: fadeInUp
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-delay: 0.5s; // 前のコンポーネントが消えるまで遅延させる
  animation-duration: 1s;
  animation-fill-mode: both;
}

// 非表示: slideOutRight
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
  animation-duration: 0.5s; // fadeInUpのanimation-delayと一致させる
  animation-fill-mode: both;
}

file4.js

Vue.transition('page', {
  enterClass: 'fadeInUp',
  leaveClass: 'slideOutRight',
});

file5.txt

    script(id='page-1' type='x-template')
      .page(transition='page') //- 登録したpageトランジションを適用
        h1 ページ１
        img(src='img/page-1.gif' alt='page-1')