Test VueJS transition

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -12,12 +12,19 @@
     <div class="container fill" style="height: 100vh;">
       <!-- <div class="bg"> -->
       <keep-alive>
-        <component
-          :is="display"
-          @join-game-id="launchOnlineGame($event)"
-          :username="username"
-          :game-id="onlineGameId"
-        ></component>
+        <transition
+          enter-active-class="animated bounceInUp"
+          leave-active-class="animated bounceOutDown"
+          mode="out-in"
+          appear
+        >
+          <component
+            :is="display"
+            @join-game-id="launchOnlineGame($event)"
+            :username="username"
+            :game-id="onlineGameId"
+          ></component>
+        </transition>
       </keep-alive>
       <!-- </div> -->
     </div>

tests/unit/AppMenu.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import { shallowMount } from '@vue/test-utils';
-import AppMenu from '@/menu/AppMenu.vue'
+import AppMenu from '@/menu/AppMenu.vue';
 
 // const wrapper =
 shallowMount(AppMenu);