From 4d3f0be419a972a9233e187458ff45f13baf1dde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= <root@acid-chicken.com> Date: Mon, 27 Mar 2023 05:16:39 +0000 Subject: [PATCH] chore: respect the animation preference --- .../frontend/src/components/global/MkAvatar.vue | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index ed104cb0fa..14075cd7b5 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -1,5 +1,5 @@ <template> -<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> +<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> <img :class="$style.inner" :src="url" decoding="async"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> <div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]"> @@ -27,6 +27,7 @@ import { acct, userPage } from '@/filters/user'; import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue'; import { defaultStore } from '@/store'; +const animation = $ref(defaultStore.state.animation); const squareAvatars = $ref(defaultStore.state.squareAvatars); const useBlurEffect = $ref(defaultStore.state.useBlurEffect); @@ -156,6 +157,14 @@ watch(() => props.user.avatarBlurhash, () => { mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><filter id="a"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter><circle cx="16" cy="16" r="15" filter="url(%23a)"/></svg>') exclude center / 50% 50%, linear-gradient(#fff, #fff); // polyfill of `image(#fff)` + + > .earLeft { + animation: eartightright 6s infinite; + } + + > .earRight { + animation: eartightleft 6s infinite; + } } > .earLeft, @@ -196,7 +205,6 @@ watch(() => props.user.avatarBlurhash, () => { > .earLeft { transform: rotate(37.5deg) skew(30deg); - animation: eartightleft 6s infinite; &, &::after { border-radius: 0 75% 75%; @@ -218,7 +226,6 @@ watch(() => props.user.avatarBlurhash, () => { > .earRight { transform: rotate(-37.5deg) skew(-30deg); - animation: eartightright 6s infinite; &, &::after { border-radius: 75% 0 75% 75%; @@ -239,7 +246,7 @@ watch(() => props.user.avatarBlurhash, () => { } } - &:hover { + &.animation:hover { > .ears { > .earLeft { animation: earwiggleleft 1s infinite;