Vue.jsでSPA作成に便利なぺージ遷移用のtransitionライブラリ「vue-page-transition」

by kabanoki

HTML

<div id="app">
  <div class="container">
    <b-navbar toggleable="lg" type="dark" variant="info" >
      <b-navbar-nav>
        <b-nav-item href="#/">Home</b-nav-item>
        <b-nav-item-dropdown text="Fade" right>
          <b-dropdown-item href="#/fade/default">Default</b-dropdown-item>
          <b-dropdown-item href="#/fade/up">up</b-dropdown-item>
          <b-dropdown-item href="#/fade/down">down</b-dropdown-item>
          <b-dropdown-item href="#/fade/right">right</b-dropdown-item>
          <b-dropdown-item href="#/fade/left">left</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown text="Overlay" right>
          <b-dropdown-item href="#/overlay/up">up</b-dropdown-item>
          <b-dropdown-item href="#/overlay/down">down</b-dropdown-item>
          <b-dropdown-item href="#/overlay/right">right</b-dropdown-item>
          <b-dropdown-item href="#/overlay/left">left</b-dropdown-item>
          <b-dropdown-item href="#/overlay/up-full">up-full</b-dropdown-item>
          <b-dropdown-item href="#/overlay/down-full">down-full</b-dropdown-item>
          <b-dropdown-item href="#/overlay/right-full">right-full</b-dropdown-item>
          <b-dropdown-item href="#/overlay/left-full">left-full</b-dropdown-item>
          <b-dropdown-item href="#/overlay/up-down">up-down</b-dropdown-item>
          <b-dropdown-item href="#/overlay/left-right">left-right</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown text="Flip" right>
          <b-dropdown-item href="#/flip/x">flip-x</b-dropdown-item>
          <b-dropdown-item href="#/flip/y">flip-y</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item href="#/zoom/default">Zoom</b-nav-item>
      </b-navbar-nav>
    </b-navbar>
    <main>
      <vue-page-transition >
        <router-view></router-view>
      </vue-page-transition>
    </main>
  </div>
</div>
<link type="text/css" rel="stylesheet"...

CSS

body {
  background: #20262E;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  transition: all 0.2s;
}

Vue

const router = new VueRouter({
  routes: [
  {
    path: '/',
    name: 'Vue Page Transition',
    component: {
      template: '<div>Vue Page Transition</div>' 
    },
    meta: { transition: 'fade' },
  },
  {
    path: '/fade/default',
    name: 'Default Fade - Vue Page Transition',
    component: {
      template: '<div>Default Fade - Vue Page Transition</div>' 
    },
    meta: { transition: 'fade' },
  },
  {
    path: '/fade/up',
    name: 'Fade In Up - Vue Page Transition',
    component: {
      template: '<div>Fade In Up - Vue Page Transition</div>' 
    },
    meta: { transition: 'fade-in-up' },
  },
  {
    path: '/fade/right',
    name: 'Fade In Right - Vue Page Transition',
    component: {
      template: '<div>Fade In Right - Vue Page Transition</div>'
    },
    meta: { transition: 'fade-in-right' },
  },
  {
    path: '/fade/down',
    name: 'Fade In Down - Vue Page Transition',
    component: {
      template: '<div>Fade In Down - Vue Page Transition</div>' 
    },
    meta: { transition: 'fade-in-down' },
  },
  {
    path: '/fade/left',
    name: 'Fade In Left - Vue Page Transition',
    component: {
      template: '<div>Fade In Left - Vue Page Transition</div>' 
    },
    meta: { transition: 'fade-in-left' },
  },
  
  {
    path: '/zoom/default',
    name: 'Default Zoom - Vue Page Transition',
    component: {
      template: '<div>Default Zoom - Vue Page Transition</div>' 
    },
    meta: { transition: 'zoom' },
  },
  {
    path: '/flip/x',
    name: 'Flip X - Vue Page Transition',
    component: {
      template: '<div>Flip X - Vue Page Transition</div>' 
    },
    meta: { transition: 'flip-x' },
  },
  {
    path: '/flip/y',
    name: 'Flip Y - Vue Page Transition',
    component: {
      template: '<div>Flip Y - Vue Page Transition</div>' 
    },
    meta: { transition: 'flip-y' },
  },
  {
    path: '/overlay/up',
    name: 'Overlay Up - Vue Page Transition',
    component: {
      template: '<div>Overlay Up - Vue Page...