From 1edb8cf0e920aacec8a44a9affe7ee9302102498 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Apr 2021 15:33:33 +0900
Subject: add animation

---
 src/client/directives/click-anime.ts | 22 ++++++++++++++++++++++
 src/client/directives/index.ts       |  2 ++
 2 files changed, 24 insertions(+)
 create mode 100644 src/client/directives/click-anime.ts

(limited to 'src/client/directives')

diff --git a/src/client/directives/click-anime.ts b/src/client/directives/click-anime.ts
new file mode 100644
index 0000000000..864155f076
--- /dev/null
+++ b/src/client/directives/click-anime.ts
@@ -0,0 +1,22 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(el, binding, vn) {
+		el.addEventListener('mousedown', () => {
+			el.classList.add('_anime_bounce_ready');
+
+			el.addEventListener('mouseleave', () => {
+				el.classList.remove('_anime_bounce_ready');
+			});
+		});
+
+		el.addEventListener('click', () => {
+			el.classList.add('_anime_bounce');
+		});
+
+		el.addEventListener('animationend', () => {
+			el.classList.remove('_anime_bounce_ready');
+			el.classList.remove('_anime_bounce');
+		});
+	}
+} as Directive;
diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts
index 6513350e0d..f0a0123771 100644
--- a/src/client/directives/index.ts
+++ b/src/client/directives/index.ts
@@ -8,6 +8,7 @@ import hotkey from './hotkey';
 import appear from './appear';
 import anim from './anim';
 import stickyContainer from './sticky-container';
+import clickAnime from './click-anime';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
@@ -18,5 +19,6 @@ export default function(app: App) {
 	app.directive('hotkey', hotkey);
 	app.directive('appear', appear);
 	app.directive('anim', anim);
+	app.directive('click-anime', clickAnime);
 	app.directive('sticky-container', stickyContainer);
 }
-- 
cgit v1.2.3-freya