Tweak animation

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>

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;

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% {