feat(Forms): add transition to card-header-action btn-close

CHANGELOG.md

@@ -1,7 +1,7 @@
 ## [vue](./README.md) version `changelog`
 
 ##### `v2.0.0-alpha.0`
-- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
+- refactor: separation of concerns - (CoreUI template/components) for use CoreUI as npm module
 - refactor: project structure change
 - refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
 - chore: moved to [Semantic Versioning](https://semver.org/)
@@ -9,6 +9,9 @@
 - refactor: rename containers
 - refactor(Colors): view layout, sub-components
 - refactor(Switches): move to `Switch component v2`
+- refactor(Cards): add transition to card-header-action `btn-close`
+- refactor(Cards): add collapse to card-header-action `btn-minimize`
+- refactor(Forms): add transition to card-header-action `btn-close`
 
 other:  
 

src/views/base/Forms.vue

@@ -555,7 +555,8 @@
             <strong>Validation feedback</strong> Form
           </div>
           <b-card-body>
-            <b-form-group>
+            <b-form>
+              <b-form-group validated>
                 <label class="col-form-label" for="inputIsValid">Input is valid</label>
                 <input type="text" class="form-control is-valid" id="inputIsValid">
                 <b-form-valid-feedback>
@@ -569,6 +570,7 @@
                   Please provide a valid information.
                 </b-form-invalid-feedback>
               </b-form-group>
+            </b-form>
           </b-card-body>
         </b-card>
       </b-col>
@@ -948,7 +950,8 @@
     </b-row>
     <b-row>
       <b-col lg="12">
-        <b-card no-body>
+        <transition name="fade">
+          <b-card no-body v-if="show">
             <div slot="header">
               <i class="fa fa-edit"></i> Form Elements
               <div class="card-header-actions">
@@ -958,7 +961,7 @@
                 <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">
+                <b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
                   <i class="icon-close"></i>
                 </b-link>
               </div>
@@ -1012,6 +1015,7 @@
               </b-card-body>
             </b-collapse>
           </b-card>
+        </transition>
       </b-col>
     </b-row>
   </div>
@@ -1022,7 +1026,8 @@ export default {
   name: 'forms',
   data () {
     return {
-      selected: [] // Must be an array reference!
+      selected: [], // Must be an array reference!
+      show: true
     }
   },
   methods: {
@@ -1032,3 +1037,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>