Javascript 在react应用程序中从模式内部单击“下一步”和“上一步”按钮时，无法使动画（淡入淡出）在模式上工作

我使用的是一个ReactJS应用程序，它映射到一个div中显示的对象数组上。当我单击每个div时，会出现一个model，其中显示了model上相应的对象数据

在模式面板上有“上一步”和“下一步”按钮。单击“下一步”按钮时，模态将显示第二个对象数据，进一步单击它将显示第三个对象数据

上一个按钮也是如此，但方向相反

我正在使用react-reveal库在模式中的文本上显示淡入淡出动画。当我单击“单个DIV”时，将显示带有相应对象数据的模式，动画将在该模式上工作

但是，当我从模式内部单击“上一个”和“下一个”按钮时，下一个对象的相应数据确实会出现，但动画对文本不起作用

如何在模式中单击“上一步”和“下一步”按钮后使动画工作

工作代码为：

App.js 沙盒工作版本如下：

---

您必须通过向

淡入

元素添加

关键点

来强制动画。

---

但是如何设置

关键点

强制动画。“我还是不明白。”阿诸萨，看看这个

import React, {useState} from 'react';
import Fade from 'react-reveal/Fade';
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';
import "./App.css";

const App = () => {
  const [open, setOpen] = useState(false);
  const [index, setIndex] = useState(0);
  const [profile, setProfile] = useState({});

  const [profiles, setProfiles] = useState([
    {title: "First title", description: "It is first description"},
    {title: "Second title", description: "It is second description"},
    {title: "third title", description: "It is third description"},
  ]);

  const onOpenModal = (item) => {
    setOpen(true);
    setProfile(item);
  }
  const onCloseModal = () => setOpen(false);
  const handlePrev = () => {
    if(index > 0){
      let i = index - 1;
      setProfile(profiles[i]);
      setIndex(i);
    }
  }

  const handleNext = () => {
    if(index < profiles.length - 1){
      let i = index + 1;
      setProfile(profiles[i]);
      setIndex(i);
    }
  }

  return (
    <div>
      <h1>Application..............</h1>
      <div className="container">
        {
          profiles.map((p, i) => (
            <div key={i} className="item" onClick={() => onOpenModal(p)}>
              <h1>{p.title}</h1>
            </div>
          ))
        }
      </div>

      <Modal open={open} onClose={onCloseModal} center
        classNames={{
          overlay: 'customOverlay',
          modal: 'customModal',
        }}>
          <h2>Simple centered modal</h2>
          <Fade bottom delay={300}>
            <h5>{profile.title}</h5>
          </Fade>

          <Fade bottom delay={800}>
            <p>{profile.description}</p>
          </Fade>

          <div className="btn-group">
            <button className="btn" onClick={handlePrev}>Prev</button>
            <button className="btn" onClick={handleNext}>Next</button>
          </div>
          
      </Modal>

    </div>
  )
}
export default App;

.container{
  display: flex;
  justify-content: space-around;
  margin-top: 8rem;
}

.item{
  border: 2px solid;
  padding: 4rem;
}


.customOverlay{
  background: rgba(36, 123, 160, 0.7);
}
.customModal{
  background: #b2dbbf;
  max-width: 700px;
  width: 100%;
  font-size: 1.8rem;
}

.btn{
  padding: 0.5rem 1.3rem;
  margin-right: 20px;
  margin-left: 8px;
  cursor: pointer;
}

.btn-group{
  width: 34%;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}