This commit is contained in:
syuilo 2020-02-08 14:31:51 +09:00
parent 18458f418f
commit 2389857be8
1 changed files with 47 additions and 4 deletions

View File

@ -8,9 +8,18 @@
<template v-else><fa :icon="faAngleDown"/></template>
</button>
</header>
<div v-show="showBody">
<slot></slot>
</div>
<transition name="container-toggle"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody">
<slot></slot>
</div>
</transition>
</div>
</template>
@ -51,12 +60,45 @@ export default Vue.extend({
toggleContent(show: boolean) {
if (!this.bodyTogglable) return;
this.showBody = show;
}
},
beforeEnter(el) {
el.style.height = '0';
},
enter(el) {
setTimeout(() => {
el.style.height = el.scrollHeight + 'px';
}, 10); // HACKY: Vue
},
afterEnter(el) {
el.style.height = 'auto';
},
beforeLeave(el) {
el.style.height = el.scrollHeight + 'px';
},
leave(el) {
setTimeout(() => {
el.style.height = '0';
}, 10); // HACKY: Vue
},
afterLeave(el) {
el.style.height = 'auto';
},
}
});
</script>
<style lang="scss" scoped>
.container-toggle-enter-active, .container-toggle-leave-active {
transition: opacity 0.5s, height 0.5s !important;
}
.container-toggle-enter {
opacity: 0;
}
.container-toggle-leave-to {
opacity: 0;
}
.ukygtjoj {
position: relative;
overflow: hidden;
@ -72,6 +114,7 @@ export default Vue.extend({
> header {
position: relative;
box-shadow: 0 1px 0 0 var(--divider);
> .title {
margin: 0;