diff --git a/src/components/mdList/mdListExpand.vue b/src/components/mdList/mdListExpand.vue index 54156f0..85f430d 100644 --- a/src/components/mdList/mdListExpand.vue +++ b/src/components/mdList/mdListExpand.vue @@ -1,5 +1,5 @@ @@ -18,22 +18,29 @@ return { 'md-transition-off': this.transitionOff }; + }, + styles() { + return { + 'margin-bottom': this.height + }; } }, methods: { calculatePadding() { - this.height = -this.$el.offsetHeight + 'px'; + window.requestAnimationFrame(() => { + this.height = -this.$el.offsetHeight - 48 + 'px'; - window.setTimeout(() => { - this.transitionOff = false; + window.setTimeout(() => { + this.transitionOff = false; + }); }); }, - recalculateAfterChildChange() { + recalculateAfterChange() { this.transitionOff = true; this.calculatePadding(); }, observeChildChanges() { - this.contentObserver = new MutationObserver(this.recalculateAfterChildChange); + this.contentObserver = new MutationObserver(this.recalculateAfterChange); this.contentObserver.observe(this.$refs.expand, { childList: true, characterData: true, @@ -44,11 +51,14 @@ mounted() { this.calculatePadding(); this.observeChildChanges(); + window.addEventListener('resize', this.recalculateAfterChange); }, beforeDestroy() { if (this.contentObserver) { this.contentObserver.disconnect(); } + + window.removeEventListener('resize', this.recalculateAfterChange); } };