feat(settings): block interactions while animation is happening
This commit is contained in:
@@ -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();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user