feat(settings): block interactions while animation is happening

This commit is contained in:
2026-02-08 20:19:40 +01:00
parent e30efff798
commit 0093c00ff9
11 changed files with 83 additions and 2 deletions

View File

@@ -12,19 +12,24 @@ useIntervalFn(() => {
now.value = new Date();
}, 1000);
const isAnimating = ref(true);
const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
const animateIntro = async () => {
isAnimating.value = true;
await Promise.all([
monthRef.value?.animateIntro(),
dayRef.value?.animateIntro(),
yearRef.value?.animateIntro(),
]);
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
await Promise.all([
monthRef.value?.animateOutro(),
dayRef.value?.animateOutro(),
@@ -37,11 +42,13 @@ onMounted(() => {
});
const handleCancel = async () => {
if (isAnimating.value) return;
await animateOutro();
store.closeSubMenu();
};
const handleConfirm = async () => {
if (isAnimating.value) return;
await animateOutro();
store.closeSubMenu();
};