From 11f8fdb235fa1c85acac43398186ebaeaba3bb11 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Thu, 28 Apr 2022 20:10:56 +0800
Subject: [PATCH] use transition to fix user avatar tooltip (#13038)

---
 .../module-bar-avatar/module-bar-avatar.vue   | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index 0c6373877c..f8e2cc0342 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -16,17 +16,11 @@
 		<v-hover v-slot="{ hover }">
 			<v-dialog v-model="signOutActive" @esc="signOutActive = false">
 				<template #activator="{ on }">
-					<v-button
-						v-tooltip.right="t('sign_out')"
-						tile
-						icon
-						x-large
-						:class="{ show: hover }"
-						class="sign-out"
-						@click="on"
-					>
-						<v-icon name="logout" />
-					</v-button>
+					<transition name="sign-out">
+						<v-button v-if="hover" v-tooltip.right="t('sign_out')" tile icon x-large class="sign-out" @click="on">
+							<v-icon name="logout" />
+						</v-button>
+					</transition>
 				</template>
 
 				<v-card>
@@ -178,22 +172,27 @@ export default defineComponent({
 		top: 0;
 		left: 0;
 		z-index: 2;
-		transform: translateY(-100%);
 		transition: transform var(--fast) var(--transition);
 
-		@media (min-width: 960px) {
-			transform: translateY(100%);
-		}
-
-		&.show {
-			transform: translateY(0%);
-		}
-
 		&:hover {
 			.v-icon {
 				--v-icon-color: var(--primary);
 			}
 		}
 	}
+
+	.sign-out-enter-active,
+	.sign-out-leave-active {
+		transform: translateY(0%);
+	}
+
+	.sign-out-enter-from,
+	.sign-out-leave-to {
+		transform: translateY(-100%);
+
+		@media (min-width: 960px) {
+			transform: translateY(100%);
+		}
+	}
 }
 </style>