fix(Animations): router && onboarding

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app :dark="dark">
     <router-view name="header" keep-alive/>
-    <transition name="fade-transition">
+    <transition name="fade-transition" mode="out-in">
       <router-view keep-alive/>
     </transition>
   </v-app>

src/components/Onboarding/hello.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-card :width="400" hover raised class="primary foreground--text mx-auto mt-3">
+    <v-card-title class="secondary">
+      <h3 class="headline">Hello there</h3>
+    </v-card-title>
+    <v-card-text class="text-xs-center">
+      <v-icon color="white" x-large>insert_emoticon</v-icon>
+      <h3 class="subheading">This is your shiny new tab page !</h3>
+    </v-card-text>
+    <v-card-actions class="secondary">
+      <v-spacer/>
+      <v-btn color="teal lighten-4" flat @click.stop="$emit('next')">Begin</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>

src/components/Onboarding/index.vue

@@ -1,40 +1,10 @@
 <template>
-  <v-content id="#onboarding">
+  <v-content id="onboarding">
     <v-container fluid>
       <v-layout align-center>
-        <v-card
-          v-show="index === 0"
-          :width="400" hover raised class="primary foreground--text mx-auto mt-3">
-          <v-card-title class="secondary">
-            <h3 class="headline">Hello there</h3>
-          </v-card-title>
-          <v-card-text class="text-xs-center">
-            <v-icon color="white" x-large>insert_emoticon</v-icon>
-            <h3 class="subheading">This is your shiny new tab page !</h3>
-          </v-card-text>
-          <v-card-actions class="secondary">
-            <v-spacer/>
-            <v-btn color="teal lighten-4" flat @click.stop="index += 1">Begin</v-btn>
-          </v-card-actions>
-        </v-card>
-        <v-card
-          v-show="index === 1"
-          :width="500" hover raised class="primary foreground--text mx-auto mt-3">
-          <v-card-title class="secondary">
-            <h3 class="headline">Why Epiboard is Awesome</h3>
-          </v-card-title>
-          <v-card-text>
-            <v-checkbox
-              label="Preferences synced across your browsers (if signed in)"
-              input-value="true" value readonly dark/>
-            <v-checkbox label="One card for each need" input-value="true" value readonly dark/>
-            <v-checkbox label="Material Design" input-value="true" value readonly dark/>
-          </v-card-text>
-          <v-card-actions class="secondary">
-            <v-spacer/>
-            <v-btn color="teal lighten-4" flat @click="finish()">Next</v-btn>
-          </v-card-actions>
-        </v-card>
+        <transition name="slide-fade" mode="out-in">
+          <component :is="board[index]" @next="next" @prev="prev"/>
+        </transition>
       </v-layout>
     </v-container>
   </v-content>

src/components/Onboarding/main.js

@@ -1,17 +1,28 @@
-import { VCheckbox } from 'vuetify';
+import Hello from './hello';
+import Why from './why';
 
 // @vue/component
 export default {
   name: 'Onboarding',
   components: {
-    VCheckbox,
+    Hello,
+    Why,
   },
   data() {
     return {
       index: 0,
+      board: ['hello', 'why'],
     };
   },
   methods: {
+    prev() {
+      this.index -= this.index > 0;
+    },
+    next() {
+      if (this.index + 1 < this.board.length) {
+        this.index += 1;
+      } else this.finish();
+    },
     finish() {
       this.$store.commit('SET_TUTORIAL', true);
       this.$router.replace('/');

src/components/Onboarding/style.scss

@@ -1,2 +1,12 @@
 #onboarding {
+  .slide-fade-enter-active {
+    transition: all .3s ease;
+  }
+  .slide-fade-leave-active {
+    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .slide-fade-enter, .slide-fade-leave-to {
+    transform: translateX(100px);
+    opacity: 0;
+  }
 }

src/components/Onboarding/why.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-card :width="500" hover raised class="primary foreground--text mx-auto mt-3">
+    <v-card-title class="secondary">
+      <h3 class="headline">Why Epiboard is Awesome</h3>
+    </v-card-title>
+    <v-card-text>
+      <v-checkbox
+        label="Preferences synced across your browsers (if signed in)"
+        input-value="true" value readonly dark/>
+      <v-checkbox label="One card for each need" input-value="true" value readonly dark/>
+      <v-checkbox label="Material Design" input-value="true" value readonly dark/>
+    </v-card-text>
+    <v-card-actions class="secondary">
+      <v-btn color="teal lighten-4" flat @click="$emit('prev')">Previous</v-btn>
+      <v-spacer/>
+      <v-btn color="teal lighten-4" flat @click="$emit('next')">Next</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+<script>
+import { VCheckbox } from 'vuetify';
+
+export default {
+  name: 'Why',
+  components: {
+    VCheckbox,
+  },
+}
+</script>