add animation

2 files changed, 24 insertions, 0 deletions

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);
 }