feat(settings): block interactions while animation is happening
This commit is contained in:
@@ -17,12 +17,15 @@ const OUTRO_DURATION = 0.25;
|
||||
const ROW_STAGGER = SLIDE_DURATION + 0.075;
|
||||
const ROW_COUNT = 2;
|
||||
|
||||
const isAnimating = ref(true);
|
||||
|
||||
const animation = reactive({
|
||||
rowOffsetY: new Array<number>(ROW_COUNT).fill(SLIDE_OFFSET),
|
||||
rowOpacity: new Array<number>(ROW_COUNT).fill(0),
|
||||
});
|
||||
|
||||
const animateIntro = async () => {
|
||||
isAnimating.value = true;
|
||||
const timeline = gsap.timeline();
|
||||
for (let i = 0; i < ROW_COUNT; i++) {
|
||||
timeline
|
||||
@@ -38,9 +41,11 @@ const animateIntro = async () => {
|
||||
);
|
||||
}
|
||||
await timeline;
|
||||
isAnimating.value = false;
|
||||
};
|
||||
|
||||
const animateOutro = async () => {
|
||||
isAnimating.value = true;
|
||||
const timeline = gsap.timeline();
|
||||
for (let i = 0; i < ROW_COUNT; i++) {
|
||||
timeline
|
||||
@@ -63,11 +68,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