worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add animation

Browse source
This commit is contained in:
mappi 2023-06-04 22:40:09 +09:00
parent d59dddb15b
commit fe8725fc88
1 changed files with 33 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/frontend/src/pages/user/home.vue
View file

@ -114,11 +114,11 @@
</template>
<template v-else>
<div>
<i class="ti ti-lock"></i>
<i class="ti ti-lock" :class="{[$style.animation]: animation}"></i>
<span>{{ i18n.ts.following }}</span>
</div>
<div>
<i class="ti ti-lock"></i>
<i class="ti ti-lock" :class="{[$style.animation]: animation}"></i>
<span>{{ i18n.ts.followers }}</span>
</div>
</template>
@ -171,6 +171,7 @@ import { confetti } from '@/scripts/confetti';
import MkNotes from '@/components/MkNotes.vue';
import { api } from '@/os';
import { isFfVisibility } from '@/scripts/is-ff-visibility';
import { defaultStore } from '@/store';
const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
@ -218,6 +219,8 @@ const age = $computed(() => {
return calcAge(props.user.birthday);
});
const animation = $ref(defaultStore.state.animation);
function menu(ev) {
os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
}
@ -679,4 +682,32 @@ onUnmounted(() => {
border-radius: var(--radius);
overflow: clip;
}
@keyframes keywiggle {
0% { transform: translate(-3px,-1px) rotate(-8deg); }
5% { transform: translateY(-1px) rotate(-10deg); }
10% { transform: translate(1px,-3px) rotate(0); }
15% { transform: translate(1px,1px) rotate(11deg); }
20% { transform: translate(-2px,1px) rotate(1deg); }
25% { transform: translate(-1px,-2px) rotate(-2deg); }
30% { transform: translate(-1px,2px) rotate(-3deg); }
35% { transform: translate(2px,1px) rotate(6deg); }
40% { transform: translate(-2px,-3px) rotate(-9deg); }
45% { transform: translateY(-1px) rotate(-12deg); }
50% { transform: translate(1px,2px) rotate(10deg); }
55% { transform: translateY(-3px) rotate(8deg); }
60% { transform: translate(1px,-1px) rotate(8deg); }
65% { transform: translateY(-1px) rotate(-7deg); }
70% { transform: translate(-1px,-3px) rotate(6deg); }
75% { transform: translateY(-2px) rotate(4deg); }
80% { transform: translate(-2px,-1px) rotate(3deg); }
85% { transform: translate(1px,-3px) rotate(-10deg); }
90% { transform: translate(1px) rotate(3deg); }
95% { transform: translate(-2px) rotate(-3deg); }
to { transform: translate(2px,1px) rotate(2deg); }
}
.animation:hover {
animation: keywiggle 1s;
}
</style>