Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add animation

Browse source
This commit is contained in:
syuilo 2021-04-23 15:33:33 +09:00
parent 25da4a6a79
commit 1edb8cf0e9
4 changed files with 54 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/client/directives/click-anime.ts Normal file
View file

@ -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;

2
src/client/directives/index.ts
View file

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