mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 23:31:48 +09:00
Code

Update container.vue

Browse Source
This commit is contained in:
syuilo 2020-02-08 18:02:28 +09:00
parent c97ce5255f
commit 79c366d1f2
1 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/client/components/ui/container.vue
View File

@ -9,10 +9,8 @@
</button>
</header>
<transition name="container-toggle"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
@ -62,27 +60,23 @@ export default Vue.extend({
this.showBody = show;
},
beforeEnter(el) {
el.style.height = '0';
},
enter(el) {
setTimeout(() => {
el.style.height = el.scrollHeight + 'px';
}, 10); // HACKY: Vueのバグか知らないけどこうしないと動作しない
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
},
afterEnter(el) {
el.style.height = 'auto';
},
beforeLeave(el) {
el.style.height = el.scrollHeight + 'px';
el.style.height = null;
},
leave(el) {
setTimeout(() => {
el.style.height = '0';
}, 10); // HACKY: Vueのバグか知らないけどこうしないと動作しない
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.offsetHeight; // reflow
el.style.height = 0;
},
afterLeave(el) {
el.style.height = 'auto';
el.style.height = null;
},
}
});
@ -90,6 +84,7 @@ export default Vue.extend({
<style lang="scss" scoped>
.container-toggle-enter-active, .container-toggle-leave-active {
overflow-y: hidden;
transition: opacity 0.5s, height 0.5s !important;
}
.container-toggle-enter {