let gameInit = anime.timeline({
  easing: "easeInOutExpo",
  duration: 3000,
});

gameInit
  .add({
    targets: ".buttondiv",
    scale: [0, 1],
    delay: 1000,
    duration: 750,
  })
  .add(
    {
      targets: "#srps-div",
      opacity: [0, 1],
      translateY: [-50, 0],
      duration: 750,
    },
    "-=200"
  )
  .add(
    {
      targets: "#srps-tag",
      opacity: [0, 1],
      duration: 750,
    },
    "-=800"
  )
  .add(
    {
      targets: "#code-tag",
      opacity: [0, 1],
      duration: 750,
    },
    "-=950"
  );

gameInit.finished.then(function () {
  let buttonBounce = anime.timeline({
    duration: 1200,
    easing: "easeInOutExpo",
    loop: true,
    direction: "alternate",
    delay: 3000,
  });

  buttonBounce.add({
    targets: ".buttondiv",
    scale: [1, 1.25],
  });
});

document.querySelector(".buttondiv").onclick = function(){gameStart()};

gameStart = () => {
  let startGameAni = anime.timeline({
    duration: 1250,
    easing: "easeOutBack",
    direction: 'fowards',
    loop: false
  });

  startGameAni
    .add({
      targets: ".buttondiv",
      translateX: [0, -3000],
      opacity: [1, 0]
    })
    .add({
      targets: "#choiceprompt",
      opacity: [0, 1],
      translateX:[3000, 0]
    },);
};

这是我当前的动画文件。
gameInit是一对简单的动画，用户访问网站后会调用。一旦gameInit完成，buttonBounce将启动并每3秒做一个短缩放效果。
当玩家点击按钮时，它会从画面中移到左边，choiceprompt会从右边出现，这是用startGameAni完成的。
请在此处查看有关此问题的简短视频：
https://streamable.com/cyidwj [24小时后失效]

我的问题：

• 我如何保持屏幕上的提示？当我点击任何地方附近的选择提示，特别是在中间，它再次启动动画。我不想这样。它神奇地让按钮再次出现，并再次做动画与提示再次出现。我如何才能迫使动画不重放动画后，鼠标点击？