使用挂钩反应接连发生的CSS动画

Question

我正在尝试制作具有8张图像，一次显示4张的图像。我需要他们进入时具有动画，退出时具有动画。单击其中一个时，前四个退出。但是我只看到回车动画。我想是因为进入和退出动画是同时发生的。

是否有一种方法可以使用钩子来增加延迟或类似的操作，使它们先发生与Internet Explorer兼容（非常重要）？代码如下所示：

  const [question, setQuestion] = React.useState(props.Questions[0]);
  const [animate, setAnimate] = React.useState("enter");

  React.useEffect(() => {
    if (Array.isArray(props.Questions) && props.Questions.length) {
      // switch to the next iteration by passing the next data to the <Question component
      setAnimate("enter");

      setQuestion(props.Questions[0]);
    } else {
      // if there are no more iterations (this looks dumb but needs to be here and works)
      $("#mrForm").submit();
    }
  });

  const onStubClick = (e, QuestionCode, StubName) => {
    e.preventDefault();
    // store selected stub to be submitted later
    var newResponse = response.concat({ QuestionCode, StubName });
    setResponse(newResponse);

    setAnimate("exit");

    // remove the first iteration of stubs that were already shown
    props.Questions.splice(0, 1);

    if (props.QuestionText.QuestionTextLabel.length > 1) {
      // remove first iteration of questiontext if applicable
      props.QuestionText.QuestionTextLabel.splice(0, 1);
      props.QuestionText.QuestionTextImage.splice(0, 1);

      // switch the question text
      setQuestionLabel({ Label: props.QuestionText.QuestionTextLabel[0], Image: props.QuestionText.QuestionTextImage[0] });
    }
  };