From 9cab2cd9401a3a265a0fdf5513db73e5f3d85cec Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Apr 2021 18:38:38 +0900
Subject: [PATCH] Tweak animation

---
 src/client/components/launch-pad.vue | 4 ++--
 src/client/directives/click-anime.ts | 4 ++++
 src/client/style.scss                | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue
index e3d24c70f2..e66bbd73e4 100644
--- a/src/client/components/launch-pad.vue
+++ b/src/client/components/launch-pad.vue
@@ -3,12 +3,12 @@
 	<div class="szkkfdyq _popup">
 		<div class="main">
 			<template v-for="item in items">
-				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
+				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }" v-click-anime>
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
-				<MkA v-else :to="item.to" @click.passive="close()">
+				<MkA v-else :to="item.to" @click.passive="close()" v-click-anime>
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
diff --git a/src/client/directives/click-anime.ts b/src/client/directives/click-anime.ts
index 864155f076..9fd583d6dd 100644
--- a/src/client/directives/click-anime.ts
+++ b/src/client/directives/click-anime.ts
@@ -2,7 +2,10 @@ import { Directive } from 'vue';
 
 export default {
 	mounted(el, binding, vn) {
+		el.classList.add('_anime_bounce_standBy');
+
 		el.addEventListener('mousedown', () => {
+			el.classList.add('_anime_bounce_standBy');
 			el.classList.add('_anime_bounce_ready');
 
 			el.addEventListener('mouseleave', () => {
@@ -17,6 +20,7 @@ export default {
 		el.addEventListener('animationend', () => {
 			el.classList.remove('_anime_bounce_ready');
 			el.classList.remove('_anime_bounce');
+			el.classList.add('_anime_bounce_standBy');
 		});
 	}
 } as Directive;
diff --git a/src/client/style.scss b/src/client/style.scss
index 07b80d553f..aa00303a15 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -522,13 +522,18 @@ hr {
 }
 
 ._anime_bounce {
+	will-change: transform;
   animation: bounce ease 0.7s;
   animation-iteration-count: 1;
   transform-origin: 50% 50%;
 }
 ._anime_bounce_ready {
+	will-change: transform;
 	transform:  scaleX(0.90) scaleY(0.90) ;
 }
+._anime_bounce_standBy {
+	transition: transform 0.1s ease;
+}
 
 @keyframes bounce{
   0% {