From 80929eb176beec7f46f68b7c5cd35e37f3cda751 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 23 Feb 2018 03:33:12 +0900
Subject: [PATCH] :v:

---
 src/web/app/animation.styl                    | 12 ++++
 src/web/app/app.styl                          |  1 +
 .../views/components/ui.header.account.vue    | 56 +++++++++++--------
 3 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 src/web/app/animation.styl

diff --git a/src/web/app/animation.styl b/src/web/app/animation.styl
new file mode 100644
index 000000000..8f121b313
--- /dev/null
+++ b/src/web/app/animation.styl
@@ -0,0 +1,12 @@
+.zoom-in-top-enter-active,
+.zoom-in-top-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 top;
+}
+.zoom-in-top-enter,
+.zoom-in-top-leave-active {
+	opacity: 0;
+	transform: scaleY(0);
+}
diff --git a/src/web/app/app.styl b/src/web/app/app.styl
index 22043b883..c441a445f 100644
--- a/src/web/app/app.styl
+++ b/src/web/app/app.styl
@@ -1,4 +1,5 @@
 @import "../style"
+@import "../animation"
 
 html
 	&.progress
diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue
index af58e81a0..b55333ecc 100644
--- a/src/web/app/desktop/views/components/ui.header.account.vue
+++ b/src/web/app/desktop/views/components/ui.header.account.vue
@@ -4,29 +4,31 @@
 		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
 		<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
 	</button>
-	<div class="menu" v-if="isOpen">
-		<ul>
-			<li>
-				<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
-			</li>
-			<li @click="drive">
-				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
-			</li>
-			<li>
-				<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
-			</li>
-		</ul>
-		<ul>
-			<li @click="settings">
-				<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
-			</li>
-		</ul>
-		<ul>
-			<li @click="signout">
-				<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
-			</li>
-		</ul>
-	</div>
+	<transition name="zoom-in-top">
+		<div class="menu" v-if="isOpen">
+			<ul>
+				<li>
+					<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
+				</li>
+				<li @click="drive">
+					<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
+				</li>
+				<li>
+					<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
+				</li>
+			</ul>
+			<ul>
+				<li @click="settings">
+					<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
+				</li>
+			</ul>
+			<ul>
+				<li @click="signout">
+					<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
+				</li>
+			</ul>
+		</div>
+	</transition>
 </div>
 </template>
 
@@ -209,4 +211,12 @@ export default Vue.extend({
 						background $theme-color
 						color $theme-color-foreground
 
+					&:active
+						background darken($theme-color, 10%)
+
+.zoom-in-top-enter-active,
+.zoom-in-top-leave-active {
+	transform-origin: center -16px;
+}
+
 </style>