diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 7cceccc0..27af0f39 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -203,23 +203,29 @@
         </b-card>
       </b-col>
       <b-col sm="6" md="4">
-        <b-card class="bg-secondary">
-          <div slot="header">
-            Card with header actions
-            <div class="card-header-actions">
-              <b-link href="#" class="card-header-action btn-setting">
-                <i class="icon-settings"></i>
-              </b-link>
-              <b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
-                <i class="icon-arrow-up"></i>
-              </b-link>
-              <b-link href="#" class="card-header-action btn-close">
-                <i class="icon-close"></i>
-              </b-link>
+        <transition name="fade">
+          <b-card class="bg-secondary" no-body v-if="show">
+            <div slot="header">
+              Card with header actions
+              <div class="card-header-actions">
+                <b-link href="#" class="card-header-action btn-setting">
+                  <i class="icon-settings"></i>
+                </b-link>
+                <b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
+                  <i class="icon-arrow-up"></i>
+                </b-link>
+                <b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
+                  <i class="icon-close"></i>
+                </b-link>
+              </div>
             </div>
-          </div>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </b-card>
+            <b-collapse id="collapse1" visible>
+              <b-card-body>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </b-card-body>
+            </b-collapse>
+          </b-card>
+        </transition>
       </b-col>
     </b-row><!--/.row-->
   </div>
@@ -227,6 +233,24 @@
 
 <script>
 export default {
-  name: 'cards'
+  name: 'cards',
+  data: function () {
+    return {
+      show: true
+    }
+  }
 }
 </script>
+
+<style scoped>
+  .fade-enter-active {
+    transition: all .3s ease;
+  }
+  .fade-leave-active {
+    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .fade-enter, .fade-leave-to {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+</style>