ボトムバーではメニューアニメーションの上下を逆にするように

mei23 · Oct 11, 2020 · 2a86337 · 2a86337
1 parent ed10408
commit 2a86337
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/client/app/animation.styl b/src/client/app/animation.styl
@@ -11,6 +11,19 @@
 	transform: scaleY(0);
 }
 
+.zoom-in-bottom-enter-active,
+.zoom-in-bottom-leave-active {
+	opacity: 1;
+	transform: scaleY(1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transform-origin: center bottom;
+}
+.zoom-in-bottom-enter,
+.zoom-in-bottom-leave-active {
+	opacity: 0;
+	transform: scaleY(0);
+}
+
 .entranceFromTop {
 	animation-duration: 0.5s;
 	animation-name: entranceFromTop;

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -13,7 +13,7 @@
 		</span>
 		<mk-avatar class="avatar" :user="$store.state.i"/>
 	</button>
-	<transition name="zoom-in-top">
+	<transition :name="navbar === 'top' ? 'zoom-in-top' : 'zoom-in-bottom'">
 		<div class="menu" :class="navbar" v-if="isOpen">
 			<ul>
 				<li @click="closeMenu">