From 9cab2cd9401a3a265a0fdf5513db73e5f3d85cec Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Apr 2021 18:38:38 +0900
Subject: [PATCH] Tweak animation
---
src/client/components/launch-pad.vue | 4 ++--
src/client/directives/click-anime.ts | 4 ++++
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% {