From 81839ee3f61682be7b86df89d5f825309fe2786b Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Wed, 23 May 2018 18:43:27 +0200
Subject: [PATCH] feat(Cards): add transition/collapse to card-header-action

---
 src/views/base/Cards.vue | 58 ++++++++++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 17 deletions(-)

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>