mirror of
https://example.com
synced 2024-11-23 09:56:39 +09:00
fix: 🥚 animation
This commit is contained in:
parent
90f58075ba
commit
4968d1ecb3
1 changed files with 20 additions and 9 deletions
|
@ -34,11 +34,7 @@
|
|||
<div class="content">
|
||||
<img
|
||||
ref="instanceIcon"
|
||||
:src="
|
||||
$instance.iconUrl ||
|
||||
$instance.faviconUrl ||
|
||||
'/favicon.ico'
|
||||
"
|
||||
:src="iconSrc"
|
||||
aria-label="none"
|
||||
class="icon"
|
||||
:class="instanceIconAnimation"
|
||||
|
@ -211,8 +207,9 @@ withDefaults(
|
|||
|
||||
let stats = $ref(null);
|
||||
let instanceIcon = $ref<HTMLImageElement>();
|
||||
let instanceIconAnimation = "none";
|
||||
let iconClicks = 0;
|
||||
let iconSrc = ref(instance.iconUrl || instance.faviconUrl || "/favicon.ico");
|
||||
let instanceIconAnimation = ref("");
|
||||
let tabs = ["overview", "emojis", "charts"];
|
||||
let tab = $ref(tabs[0]);
|
||||
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
||||
|
@ -274,15 +271,26 @@ function easterEgg() {
|
|||
defaultStore.set("woozyMode", defaultStore.state.woozyMode);
|
||||
if (instanceIcon) {
|
||||
if (iconClicks % 6 === 0) {
|
||||
instanceIcon.src =
|
||||
iconSrc.value =
|
||||
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
||||
} else {
|
||||
instanceIcon.src = "/static-assets/woozy.png";
|
||||
iconSrc.value = "/static-assets/woozy.png";
|
||||
}
|
||||
instanceIcon.src = iconSrc.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(iconSrc, (newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
instanceIconAnimation.value = "spin";
|
||||
|
||||
setTimeout(() => {
|
||||
instanceIconAnimation.value = "";
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
let swiperRef = null;
|
||||
|
||||
function setSwiperRef(swiper) {
|
||||
|
@ -314,7 +322,10 @@ function syncSlide(index) {
|
|||
display: block;
|
||||
margin: 16px auto 0 auto;
|
||||
height: 64px;
|
||||
transition: spinY 1s;
|
||||
}
|
||||
|
||||
> .spin {
|
||||
animation: spinY 1s linear infinite;
|
||||
}
|
||||
|
||||
> .name {
|
||||
|
|
Loading…
Reference in a new issue