Merge pull request #2 from vedovelli/transitions

Transitions
codecasts · Nov 27, 2016 · 6b7e01e · 6b7e01e
2 parents 1df41d4 + 83f59c9
commit 6b7e01e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -21,9 +21,20 @@ export default {
     <cc-nav-bar v-show="shouldShowNavigation"></cc-nav-bar>
     <cc-alerts></cc-alerts>
     <div class="container">
-      <router-view></router-view>
+      <transition name="fade">
+        <router-view></router-view>
+      </transition>
     </div>
   </div>
 </template>
 
 <style lang="sass" src="assets/sass/app.scss"></style>
+
+<style scoped>
+  .fade-enter-active {
+    transition: opacity .5s ease;
+  }
+  .fade-enter {
+    opacity: 0;
+  }
+</style>
diff --git a/client/src/modules/categories/main.vue b/client/src/modules/categories/main.vue
@@ -226,7 +226,7 @@
     <!-- Form to create/edit will be inserted here  -->
     <!-- when navigate to /nova or /editar/{id}  -->
     <!-- see /src/modules/categories/routes.js  -->
-    <transition name="slide">
+    <transition name="fade">
       <router-view></router-view>
     </transition>
 
@@ -237,7 +237,7 @@
           <th colspan="2">Category</th>
         </tr>
       </thead>
-      <tbody :class="{ blur: fetching }">
+      <tbody>
         <tr v-for="category in categories">
           <td width="1%" nowrap>{{ category.id }}</td>
           <td>{{ category.name }}</td>
@@ -276,13 +276,10 @@
   .button-within-header {
     margin-top: 32px;
   }
-  .blur {
-    filter: blur(7px);
-  }
-  .slide-enter-active, .slide-leave-active {
+  .fade-enter-active, .fade-leave-active {
     transition: opacity .7s ease;
   }
-  .slide-enter, .slide-leave-active {
+  .fade-enter, .fade-leave-active {
     opacity: 0;
   }
 </style>