From 1edb8cf0e920aacec8a44a9affe7ee9302102498 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Apr 2021 15:33:33 +0900
Subject: [PATCH] add animation
---
src/client/directives/click-anime.ts | 22 ++++++++++++++++++++++
src/client/directives/index.ts | 2 ++
src/client/style.scss | 24 ++++++++++++++++++++++++
src/client/ui/default.sidebar.vue | 12 ++++++------
4 files changed, 54 insertions(+), 6 deletions(-)
create mode 100644 src/client/directives/click-anime.ts
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);
}
diff --git a/src/client/style.scss b/src/client/style.scss
index ab8da9ccfa..7c9b9f06b0 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -520,3 +520,27 @@ hr {
transform: scale3d(1, 1, 1);
}
}
+
+._anime_bounce {
+ animation: bounce ease 1s;
+ animation-iteration-count: 1;
+ transform-origin: 50% 50%;
+}
+._anime_bounce_ready {
+ transform: scaleX(0.90) scaleY(0.90) ;
+}
+
+@keyframes bounce{
+ 0% {
+ transform: scaleX(0.90) scaleY(0.90) ;
+ }
+ 13% {
+ transform: scaleX(1.10) scaleY(1.10) ;
+ }
+ 35% {
+ transform: scaleX(0.95) scaleY(0.95) ;
+ }
+ 100% {
+ transform: scaleX(1.00) scaleY(1.00) ;
+ }
+}
diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue
index b07914679d..a55a1770ff 100644
--- a/src/client/ui/default.sidebar.vue
+++ b/src/client/ui/default.sidebar.vue
@@ -1,6 +1,6 @@
<template>
<div class="npcljfve" :class="{ iconOnly }">
- <button class="item _button account" @click="openAccountMenu">
+ <button class="item _button account" @click="openAccountMenu" v-click-anime>
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
<div class="post" @click="post">
@@ -9,25 +9,25 @@
</MkButton>
</div>
<div class="divider"></div>
- <MkA class="item index" active-class="active" to="/" exact>
+ <MkA class="item index" active-class="active" to="/" exact v-click-anime>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
- <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
+ <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
- <MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/instance" :behavior="settingsWindowed ? 'modalWindow' : null">
+ <MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/instance" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
</MkA>
- <button class="item _button" @click="more">
+ <button class="item _button" @click="more" v-click-anime>
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
- <MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+ <MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<div class="divider"></div>