fix: 🥚 animation
This commit is contained in:
parent
90f58075ba
commit
4968d1ecb3
@ -34,11 +34,7 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<img
|
<img
|
||||||
ref="instanceIcon"
|
ref="instanceIcon"
|
||||||
:src="
|
:src="iconSrc"
|
||||||
$instance.iconUrl ||
|
|
||||||
$instance.faviconUrl ||
|
|
||||||
'/favicon.ico'
|
|
||||||
"
|
|
||||||
aria-label="none"
|
aria-label="none"
|
||||||
class="icon"
|
class="icon"
|
||||||
:class="instanceIconAnimation"
|
:class="instanceIconAnimation"
|
||||||
@ -211,8 +207,9 @@ withDefaults(
|
|||||||
|
|
||||||
let stats = $ref(null);
|
let stats = $ref(null);
|
||||||
let instanceIcon = $ref<HTMLImageElement>();
|
let instanceIcon = $ref<HTMLImageElement>();
|
||||||
let instanceIconAnimation = "none";
|
|
||||||
let iconClicks = 0;
|
let iconClicks = 0;
|
||||||
|
let iconSrc = ref(instance.iconUrl || instance.faviconUrl || "/favicon.ico");
|
||||||
|
let instanceIconAnimation = ref("");
|
||||||
let tabs = ["overview", "emojis", "charts"];
|
let tabs = ["overview", "emojis", "charts"];
|
||||||
let tab = $ref(tabs[0]);
|
let tab = $ref(tabs[0]);
|
||||||
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
||||||
@ -274,15 +271,26 @@ function easterEgg() {
|
|||||||
defaultStore.set("woozyMode", defaultStore.state.woozyMode);
|
defaultStore.set("woozyMode", defaultStore.state.woozyMode);
|
||||||
if (instanceIcon) {
|
if (instanceIcon) {
|
||||||
if (iconClicks % 6 === 0) {
|
if (iconClicks % 6 === 0) {
|
||||||
instanceIcon.src =
|
iconSrc.value =
|
||||||
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
||||||
} else {
|
} 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;
|
let swiperRef = null;
|
||||||
|
|
||||||
function setSwiperRef(swiper) {
|
function setSwiperRef(swiper) {
|
||||||
@ -314,7 +322,10 @@ function syncSlide(index) {
|
|||||||
display: block;
|
display: block;
|
||||||
margin: 16px auto 0 auto;
|
margin: 16px auto 0 auto;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
transition: spinY 1s;
|
}
|
||||||
|
|
||||||
|
> .spin {
|
||||||
|
animation: spinY 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .name {
|
> .name {
|
||||||
|
Loading…
Reference in New Issue
Block a user