pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): block interactions while animation is happening

Browse Source
This commit is contained in:
Stevan
2026-02-08 20:19:40 +01:00
parent 4de10dd309
commit cfaf8c8d29
11 changed files with 83 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/Settings/BottomScreen/Menus/Clock/Time.vue
View File

@@ -21,10 +21,13 @@ const animation = reactive({
opacity: 0,
});
const isAnimating = ref(true);
const hourRef = useTemplateRef<InstanceType<typeof NumberInput>>("hour");
const minuteRef = useTemplateRef<InstanceType<typeof NumberInput>>("minute");
const animateIntro = async () => {
isAnimating.value = true;
await Promise.all([
hourRef.value?.animateIntro(),
minuteRef.value?.animateIntro(),
@@ -33,9 +36,11 @@ const animateIntro = async () => {
.to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0),
]);
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
await Promise.all([
hourRef.value?.animateOutro(),
minuteRef.value?.animateOutro(),
@@ -55,11 +60,13 @@ onMounted(() => {
});
const handleCancel = async () => {
if (isAnimating.value) return;
await animateOutro();
store.closeSubMenu();
};
const handleConfirm = async () => {
if (isAnimating.value) return;
await animateOutro();
store.closeSubMenu();
};