Tweak animation
This commit is contained in:
parent
3286c93c8f
commit
9cab2cd940
3 changed files with 11 additions and 2 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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% {
|
||||
|
|
Loading…
Reference in a new issue