wait-what/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

Tweak animation

Browse source
This commit is contained in:
syuilo 2021-04-24 18:38:38 +09:00
parent 3286c93c8f
commit 9cab2cd940
3 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/components/launch-pad.vue
View file

@ -3,12 +3,12 @@
<div class="szkkfdyq _popup"> <div class="szkkfdyq _popup">
<div class="main"> <div class="main">
<template v-for="item in items"> <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> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span> <span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button> </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> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span> <span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>

4
src/client/directives/click-anime.ts
View file

@ -2,7 +2,10 @@ import { Directive } from 'vue';
export default { export default {
mounted(el, binding, vn) { mounted(el, binding, vn) {
el.classList.add('_anime_bounce_standBy');
el.addEventListener('mousedown', () => { el.addEventListener('mousedown', () => {
el.classList.add('_anime_bounce_standBy');
el.classList.add('_anime_bounce_ready'); el.classList.add('_anime_bounce_ready');
el.addEventListener('mouseleave', () => { el.addEventListener('mouseleave', () => {
@ -17,6 +20,7 @@ export default {
el.addEventListener('animationend', () => { el.addEventListener('animationend', () => {
el.classList.remove('_anime_bounce_ready'); el.classList.remove('_anime_bounce_ready');
el.classList.remove('_anime_bounce'); el.classList.remove('_anime_bounce');
el.classList.add('_anime_bounce_standBy');
}); });
} }
} as Directive; } as Directive;

5
src/client/style.scss
View file

@ -522,13 +522,18 @@ hr {
} }
._anime_bounce { ._anime_bounce {
will-change: transform;
animation: bounce ease 0.7s; animation: bounce ease 0.7s;
animation-iteration-count: 1; animation-iteration-count: 1;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
._anime_bounce_ready { ._anime_bounce_ready {
will-change: transform;
transform: scaleX(0.90) scaleY(0.90) ; transform: scaleX(0.90) scaleY(0.90) ;
} }
._anime_bounce_standBy {
transition: transform 0.1s ease;
}
@keyframes bounce{ @keyframes bounce{
0% { 0% {