Merge pull request #844 from guijavax/change-cardexpand

Fixed issue #803

src/components/mdCard/mdCard.scss

@@ -194,6 +194,7 @@ $card-radius: 2px;
     }
   }
 
+
   .md-card-actions {
     padding: 8px;
     display: flex;
@@ -285,6 +286,8 @@ $card-radius: 2px;
       .md-card-content {
         margin-top: 0 !important;
         opacity: 1;
+        padding: 4px 16px 24px 16px ;
+        height: auto;
       }
     }
 
@@ -300,13 +303,14 @@ $card-radius: 2px;
     }
 
     .md-card-content {
-      padding-top: 4px;
+      height: 0;
+      padding: 0 16px;
       position: relative;
       z-index: 1;
       opacity: 0;
       transform: translate3D(0, 0, 0);
       transition: $swift-ease-out;
-      will-change: margin;
+      will-change: margin, height;
     }
   }
 }

src/components/mdCard/mdCardExpand.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="md-card-expand" ref="expand">
+  <div class="md-card-expand"
+    ref="expand">
     <slot></slot>
   </div>
 </template>
@@ -7,15 +8,15 @@
 <script>
   export default {
     name: 'md-card-expand',
+    data() {
+      return {
+        trigger: null,
+        content: null
+      };
+    },
     methods: {
-      setContentMargin() {
-        this.content.style.marginTop = -this.content.offsetHeight + 'px';
-      },
       toggle() {
         this.$refs.expand.classList.toggle('md-active');
-      },
-      onWindowResize() {
-        window.requestAnimationFrame(this.setContentMargin);
       }
     },
     mounted() {
@@ -24,17 +25,13 @@
         this.content = this.$el.querySelector('.md-card-content');
 
         if (this.content) {
-          this.setContentMargin();
-
           this.trigger.addEventListener('click', this.toggle);
-          window.addEventListener('resize', this.onWindowResize);
         }
       }, 200);
     },
     destroyed() {
       if (this.content) {
         this.trigger.removeEventListener('click', this.toggle);
-        window.removeEventListener('resize', this.onWindowResize);
       }
     }
   };