feat(MdCardExpandContent): reactive content (#1799)

fix #1795
vuematerial · Jun 7, 2018 · c3f6eb0 · c3f6eb0
1 parent 8670933
commit c3f6eb0
Showing 1 changed file with 39 additions and 6 deletions.
diff --git a/src/components/MdCard/MdCardExpand/MdCardExpandContent.vue b/src/components/MdCard/MdCardExpand/MdCardExpandContent.vue
@@ -5,11 +5,14 @@
 </template>
 
 <script>
+  import MdObserveElement from 'core/utils/MdObserveElement'
   export default {
     name: 'MdCardExpandContent',
     inject: ['MdCard'],
     data: () => ({
-      marginTop: 0
+      marginTop: 0,
+      resizeObserver: null,
+      transitionEnabled: true
     }),
     computed: {
       expand () {
@@ -18,21 +21,51 @@
       contentStyles () {
         return {
           'margin-top': `-${this.marginTop}px`,
-          'opacity': this.marginTop === 0 ? 1 : 0
+          'opacity': this.marginTop === 0 ? 1 : 0,
+          'transition-property': this.transitionEnabled ? null : 'none'
         }
       }
     },
-    watch: {
-      expand (expand) {
-        if (!expand) {
+    methods: {
+      calculateMarginTop () {
+        if (!this.expand) {
           this.marginTop = this.$el.children[0].offsetHeight
         } else {
           this.marginTop = 0
         }
+      },
+      calculateMarginTopImmediately () {
+        if (this.expand) {
+          return
+        }
+
+        this.transitionEnabled = false
+        this.$nextTick(() => {
+          this.calculateMarginTop()
+          this.$nextTick(() => {
+            // force reflow
+            this.$el.offsetHeight
+            this.transitionEnabled = true
+          })
+        })
+      }
+    },
+    watch: {
+      expand () {
+        this.calculateMarginTop()
       }
     },
     mounted () {
-      this.marginTop = this.$el.children[0].offsetHeight
+      this.calculateMarginTopImmediately()
+
+      this.resizeObserver = MdObserveElement(this.$el, {
+        childList: true,
+        characterData: true,
+        subtree: true
+      }, this.calculateMarginTopImmediately)
+    },
+    beforeDestroy () {
+      this.resizeObserver.disconnect()
     }
   }
 </script>