diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/components/launch-pad.vue | 4 | ||||
| -rw-r--r-- | src/client/directives/click-anime.ts | 4 | ||||
| -rw-r--r-- | src/client/style.scss | 5 |
3 files changed, 11 insertions, 2 deletions
diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue index e3d24c70f2..e66bbd73e4 100644 --- a/src/client/components/launch-pad.vue +++ b/src/client/components/launch-pad.vue @@ -3,12 +3,12 @@ <div class="szkkfdyq _popup"> <div class="main"> <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> <div class="text">{{ item.text }}</div> <span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span> </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> <div class="text">{{ item.text }}</div> <span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span> diff --git a/src/client/directives/click-anime.ts b/src/client/directives/click-anime.ts index 864155f076..9fd583d6dd 100644 --- a/src/client/directives/click-anime.ts +++ b/src/client/directives/click-anime.ts @@ -2,7 +2,10 @@ import { Directive } from 'vue'; export default { mounted(el, binding, vn) { + el.classList.add('_anime_bounce_standBy'); + el.addEventListener('mousedown', () => { + el.classList.add('_anime_bounce_standBy'); el.classList.add('_anime_bounce_ready'); el.addEventListener('mouseleave', () => { @@ -17,6 +20,7 @@ export default { el.addEventListener('animationend', () => { el.classList.remove('_anime_bounce_ready'); el.classList.remove('_anime_bounce'); + el.classList.add('_anime_bounce_standBy'); }); } } as Directive; diff --git a/src/client/style.scss b/src/client/style.scss index 07b80d553f..aa00303a15 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -522,13 +522,18 @@ hr { } ._anime_bounce { + will-change: transform; animation: bounce ease 0.7s; animation-iteration-count: 1; transform-origin: 50% 50%; } ._anime_bounce_ready { + will-change: transform; transform: scaleX(0.90) scaleY(0.90) ; } +._anime_bounce_standBy { + transition: transform 0.1s ease; +} @keyframes bounce{ 0% { |