🎨

packages/frontend/src/directives/click-anime.ts

@@ -2,30 +2,32 @@ import { Directive } from 'vue';
 import { defaultStore } from '@/store';
 
 export default {
-	mounted(el, binding, vn) {
-		/*
+	mounted(el: HTMLElement, binding, vn) {
 		if (!defaultStore.state.animation) return;
 
-		el.classList.add('_anime_bounce_standBy');
+		const target = el.children[0];
+
+		if (target == null) return;
+
+		target.classList.add('_anime_bounce_standBy');
 
 		el.addEventListener('mousedown', () => {
-			el.classList.add('_anime_bounce_standBy');
-			el.classList.add('_anime_bounce_ready');
+			target.classList.add('_anime_bounce_standBy');
+			target.classList.add('_anime_bounce_ready');
 
-			el.addEventListener('mouseleave', () => {
-				el.classList.remove('_anime_bounce_ready');
+			target.addEventListener('mouseleave', () => {
+				target.classList.remove('_anime_bounce_ready');
 			});
 		});
 
 		el.addEventListener('click', () => {
-			el.classList.add('_anime_bounce');
+			target.classList.add('_anime_bounce');
 		});
 
 		el.addEventListener('animationend', () => {
-			el.classList.remove('_anime_bounce_ready');
-			el.classList.remove('_anime_bounce');
-			el.classList.add('_anime_bounce_standBy');
+			target.classList.remove('_anime_bounce_ready');
+			target.classList.remove('_anime_bounce');
+			target.classList.add('_anime_bounce_standBy');
 		});
-		*/
 	},
 } as Directive;