implement fadeIn animation

Author: dweber019

src/app/app.vm.html

@@ -3,7 +3,7 @@
   <nav-bar router.bind="router"></nav-bar>
 
   <div class="page-host">
-    <router-view></router-view>
+    <router-view swap-order="after"></router-view>
   </div>
 
 </template>

src/app/main.ts

@@ -79,7 +79,7 @@ export async function configure(aurelia: Aurelia): Promise<void> {
      */
     .plugin('aurelia-validation')
     // Uncomment the line below to enable animation.
-    // .plugin('aurelia-animator-css');
+    .plugin('aurelia-animator-css')
     // if the css animator is enabled, add swap-order="after" to all router-view elements
 
     // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.

src/scss/_aurelia.scss

@@ -59,8 +59,8 @@ section {
 
 /* animate page transitions */
 section.au-enter-active {
-  -webkit-animation: fadeInRight 1s;
-  animation: fadeInRight 1s;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
 }
 
 div.au-stagger {