reactjs - 使用钩子响应一个接一个发生的 CSS 动画

Question

我正在尝试制作有 8 张图像的东西，一次显示 4 张。我需要他们在他们进入时有一个动画，在他们退出时有一个动画。单击其中一个时，前 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] });
    }
  };

标签： reactjsreact-nativereact-hooks