From 8b2687f0510923cb4f8ec275eccf8dc83ae58295 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Wed, 4 Dec 2019 23:02:12 -0500
Subject: [PATCH] Add page and bundle transitions

---
 src/App.vue                        | 17 ++++++++++++++++-
 src/components/bundles/Bundles.vue | 26 ++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 00721fc..4a00e4e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,10 @@
 <template>
   <div id="app">
     <header-bar/>
-    <router-view/>
+    <transition name="fade"
+     mode="out-in">
+      <router-view/>
+    </transition>
     <app-footer/>
   </div>
 </template>
@@ -26,3 +29,15 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter, .fade-leave-active {
+  opacity: 0;
+}
+
+</style>
diff --git a/src/components/bundles/Bundles.vue b/src/components/bundles/Bundles.vue
index 2125786..85703f3 100644
--- a/src/components/bundles/Bundles.vue
+++ b/src/components/bundles/Bundles.vue
@@ -2,7 +2,12 @@
   <div>
     <BundleNav />
     <section class="section">
-      <router-view></router-view>
+      <transition
+        name="fade"
+        mode="out-in"
+      >
+        <router-view :key="bundle"></router-view>
+      </transition>
     </section>
   </div>
 </template>
@@ -11,6 +16,23 @@
 import BundleNav from '@/components/bundles/BundleNav.vue'
 export default {
   components: {BundleNav},
-  name: 'bundles'
+  name: 'bundles',
+  computed: {
+    bundle: function () {
+      return this.$store.getters.GetBundleById(this.$route.params.id)
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter, .fade-leave-active {
+  opacity: 0;
+}
+
+</style>