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

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
Show stats 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 appear from './appear';
import anim from './anim'; import anim from './anim';
import stickyContainer from './sticky-container'; import stickyContainer from './sticky-container';
import clickAnime from './click-anime';
export default function(app: App) { export default function(app: App) {
app.directive('userPreview', userPreview); app.directive('userPreview', userPreview);
@ -18,5 +19,6 @@ export default function(app: App) {
app.directive('hotkey', hotkey); app.directive('hotkey', hotkey);
app.directive('appear', appear); app.directive('appear', appear);
app.directive('anim', anim); app.directive('anim', anim);
app.directive('click-anime', clickAnime);
app.directive('sticky-container', stickyContainer); app.directive('sticky-container', stickyContainer);
} }

24
src/client/style.scss
View file

@ -520,3 +520,27 @@ hr {
transform: scale3d(1, 1, 1); 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) ;
}
}

12
src/client/ui/default.sidebar.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="npcljfve" :class="{ iconOnly }"> <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"/> <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button> </button>
<div class="post" @click="post"> <div class="post" @click="post">
@ -9,25 +9,25 @@
</MkButton> </MkButton>
</div> </div>
<div class="divider"></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> <i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA> </MkA>
<template v-for="item in menu"> <template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div> <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> <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> <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component> </component>
</template> </template>
<div class="divider"></div> <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> <i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
</MkA> </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> <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> <span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button> </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> <i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA> </MkA>
<div class="divider"></div> <div class="divider"></div>