Merge pull request #144 from hayhaydz/dev

The original Fade-In Transition now made into dev

layouts/default.vue

@@ -99,6 +99,35 @@ h1 {
   grid-gap: 1rem;
 }
 
+// Fade in title and cards and rows
+.fade-title {
+  &-enter {
+    opacity: 0;
+
+    &-to {
+      opacity: 1;
+    }
+
+    &-active {
+       transition: opacity .1s ease-in-out;
+    }
+  }
+}
+
+.fade-card {
+  &-enter {
+    opacity: 0;
+
+    &-to {
+      opacity: 1;
+    }
+
+    &-active {
+       transition: opacity .1s ease-in-out;
+    }
+  }
+}
+
 
 @media (max-width: 400px) {
   .layout {

pages/_category.vue

@@ -1,12 +1,15 @@
 <template lang="pug">
   div
-    h1 {{ category.title }}
+    transition(name="fade-title" @after-enter="afterEnter")
-    .cards(v-if="areCardsVisible")
+      h1(v-if="showTitle") {{ category.title }}
-      template(v-for='resource in category.resources' )
+    transition(name="fade-card")
-        Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+      .cards(v-if="areCardsVisible && showCards")
-    table(v-if="!areCardsVisible")
+        template(v-for='resource in category.resources' )
-      template(v-for='resource in category.resources' )
+          Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
-        TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    transition(name="fade-card")
+      table(v-if="!areCardsVisible && showCards")
+        template(v-for='resource in category.resources' )
+          TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
@@ -20,6 +23,8 @@ export default {
       categoryRouteTitle: this.$route.params.category,
       index: '',
       activeCard: '',
+      showTitle: false,
+      showCards: false,
     }
   },
   computed: {
@@ -33,6 +38,9 @@ export default {
   created() {
     this.activeCard = this.$route.query.card || ''
   },
+  mounted() {
+    this.showTitle = true
+  },
   methods: {
     setActiveCard(index) {
       this.activeCard = index
@@ -47,6 +55,9 @@ export default {
         console.error(e)
       }
     },
+    afterEnter() {
+      this.showCards = true
+    },
   },
 }
 </script>