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

9
app/components/Settings/BottomScreen/NumberInput.vue
View File

@@ -85,6 +85,8 @@ const SLIDE_DURATION = 0.25;
const ARROW_SLIDE_DELAY = 0.15;
const ARROW_SLIDE_DURATION = 0.15;
const isAnimating = ref(true);
const animation = reactive({
offsetY: SLIDE_OFFSET,
opacity: 0,
@@ -93,6 +95,7 @@ const animation = reactive({
});
const animateIntro = async () => {
isAnimating.value = true;
await gsap
.timeline()
.to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
@@ -107,9 +110,11 @@ const animateIntro = async () => {
{ downArrowOffsetY: 0, duration: ARROW_SLIDE_DURATION, ease: "none" },
SLIDE_DURATION + ARROW_SLIDE_DELAY,
);
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
await gsap
.timeline()
.to(
@@ -208,7 +213,7 @@ onRender((ctx) => {
}, 10);
useKeyDown((key) => {
if (!props.selected || props.disabled) return;
if (isAnimating.value || !props.selected || props.disabled) return;
switch (key) {
case "NDS_UP":
increase();
@@ -220,7 +225,7 @@ useKeyDown((key) => {
});
onClick((x, y) => {
if (props.disabled) return;
if (isAnimating.value || props.disabled) return;
if (
rectContains(
[props.x, Y, upImage.value.rect.width, ARROW_IMAGE_HEIGHT],