+39
-6
lines changedFilter options
+39
-6
lines changed Original file line number Diff line number Diff line change
@@ -5,11 +5,14 @@
5 5
</template>
6 6 7 7
<script>
8 +
import MdObserveElement from 'core/utils/MdObserveElement'
8 9
export default {
9 10
name: 'MdCardExpandContent',
10 11
inject: ['MdCard'],
11 12
data: () => ({
12 -
marginTop: 0
13 +
marginTop: 0,
14 +
resizeObserver: null,
15 +
transitionEnabled: true
13 16
}),
14 17
computed: {
15 18
expand () {
@@ -18,21 +21,51 @@
18 21
contentStyles () {
19 22
return {
20 23
'margin-top': `-${this.marginTop}px`,
21 -
'opacity': this.marginTop === 0 ? 1 : 0
24 +
'opacity': this.marginTop === 0 ? 1 : 0,
25 +
'transition-property': this.transitionEnabled ? null : 'none'
22 26
}
23 27
}
24 28
},
25 -
watch: {
26 -
expand (expand) {
27 -
if (!expand) {
29 +
methods: {
30 +
calculateMarginTop () {
31 +
if (!this.expand) {
28 32
this.marginTop = this.$el.children[0].offsetHeight
29 33
} else {
30 34
this.marginTop = 0
31 35
}
36 +
},
37 +
calculateMarginTopImmediately () {
38 +
if (this.expand) {
39 +
return
40 +
}
41 + 42 +
this.transitionEnabled = false
43 +
this.$nextTick(() => {
44 +
this.calculateMarginTop()
45 +
this.$nextTick(() => {
46 +
// force reflow
47 +
this.$el.offsetHeight
48 +
this.transitionEnabled = true
49 +
})
50 +
})
51 +
}
52 +
},
53 +
watch: {
54 +
expand () {
55 +
this.calculateMarginTop()
32 56
}
33 57
},
34 58
mounted () {
35 -
this.marginTop = this.$el.children[0].offsetHeight
59 +
this.calculateMarginTopImmediately()
60 + 61 +
this.resizeObserver = MdObserveElement(this.$el, {
62 +
childList: true,
63 +
characterData: true,
64 +
subtree: true
65 +
}, this.calculateMarginTopImmediately)
66 +
},
67 +
beforeDestroy () {
68 +
this.resizeObserver.disconnect()
36 69
}
37 70
}
38 71
</script>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4