From c5e5aadfc5e5b87f92a3eaed074db8fce5e33513 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 8 Feb 2020 14:31:51 +0900
Subject: [PATCH] :art:
---
src/client/components/ui/container.vue | 51 ++++++++++++++++++++++++--
1 file changed, 47 insertions(+), 4 deletions(-)
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 19820a307..66f55102b 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -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;