Added route transition

ba0708 · ba0708 · commit 9f007743ef3c · 2017-07-19T20:52:34.000+02:00
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Routing</title>
     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/node_modules/animate.css/animate.min.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "animate.css": "^3.5.2",
     "bootstrap": "^3.3.7",
     "vue": "^2.2.1",
     "vue-router": "^2.7.0"
diff --git a/src/App.vue b/src/App.vue
@@ -27,7 +27,12 @@
                 </div>
             </nav>
 
-            <router-view :cart="cart"></router-view>
+            <transition
+                    enter-active-class="animated fadeInRight"
+                    leave-active-class="animated fadeOutLeft"
+                    mode="out-in">
+                <router-view :cart="cart"></router-view>
+            </transition>
         </div>
     </div>
 </template>
