feat(settings): block interactions while animation is happening
This commit is contained in:
@@ -19,6 +19,8 @@ const TEXT_FADE_DURATION = 0.15;
|
||||
const SCORE_OFFSET = -20;
|
||||
const SCORE_DURATION = 0.15;
|
||||
|
||||
const isAnimating = ref(true);
|
||||
|
||||
const intro = reactive({
|
||||
boardOffsetY: BOARD_SLIDE_OFFSET,
|
||||
boardOpacity: 0,
|
||||
@@ -27,6 +29,7 @@ const intro = reactive({
|
||||
});
|
||||
|
||||
const animateIntro = async () => {
|
||||
isAnimating.value = true;
|
||||
await gsap
|
||||
.timeline()
|
||||
.to(
|
||||
@@ -49,9 +52,11 @@ const animateIntro = async () => {
|
||||
{ scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
|
||||
BOARD_SLIDE_DURATION + TEXT_FADE_DURATION,
|
||||
);
|
||||
isAnimating.value = false;
|
||||
};
|
||||
|
||||
const animateOutro = async () => {
|
||||
isAnimating.value = true;
|
||||
await gsap
|
||||
.timeline()
|
||||
.to(
|
||||
@@ -80,6 +85,7 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
const handleCancel = async () => {
|
||||
if (isAnimating.value) return;
|
||||
switch (state.value) {
|
||||
case "alive": {
|
||||
state.value = "pause";
|
||||
@@ -109,6 +115,7 @@ const handleCancel = async () => {
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (isAnimating.value) return;
|
||||
switch (state.value) {
|
||||
case "alive": {
|
||||
state.value = "pause";
|
||||
|
||||
Reference in New Issue
Block a user