add slideIn example and implement fadeIn/Out animation

Author: dweber019

src/app/modules/users/users.vm.html

@@ -1,5 +1,4 @@
 <template>
-
   <section class="au-animate">
     <h2>${heading}</h2>
     <div class="row au-stagger">

src/scss/_aurelia.scss

@@ -59,8 +59,12 @@ section {
 
 /* animate page transitions */
 section.au-enter-active {
-  -webkit-animation: fadeIn 1s;
-  animation: fadeIn 1s;
+  -webkit-animation: fadeIn 0.5s;
+  animation: fadeIn 0.5s;
+}
+section.au-leave-active {
+  -webkit-animation: fadeOut 0.5s;
+  animation: fadeOut 0.5s;
 }
 
 div.au-stagger {
@@ -128,48 +132,45 @@ div.au-stagger {
 }
 
 /* animation definitions */
-@-webkit-keyframes fadeInRight {
+@keyframes fadeInRight {
   0% {
     opacity: 0;
     -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0)
   }
   100% {
     opacity: 1;
     -webkit-transform: none;
+    -ms-transform: none;
     transform: none
   }
 }
 
-@keyframes fadeInRight {
+@keyframes fadeIn {
   0% {
     opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0)
   }
   100% {
     opacity: 1;
-    -webkit-transform: none;
-    -ms-transform: none;
-    transform: none
   }
 }
 
-@-webkit-keyframes fadeIn {
+@keyframes fadeOut {
   0% {
-    opacity: 0;
+    opacity: 1;
   }
   100% {
-    opacity: 1;
+    opacity: 0;
   }
 }
 
-@keyframes fadeIn {
+// Use swap-order "with"
+@keyframes slideRightIn {
   0% {
-    opacity: 0;
+    transform: translate(-100%, 0);
   }
   100% {
-    opacity: 1;
+    transform: translate(0, 0);
   }
 }

webpack.config.js

@@ -83,7 +83,8 @@ module.exports = function (envArguments) {
       'aurelia-templating-binding',
       'aurelia-templating-router',
       'aurelia-templating-resources',
-      'aurelia-validation'
+      'aurelia-validation',
+      'aurelia-animator-css'
     ],
     theme: [
       'bootstrap-sass'