helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

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