在反应应用程序中单击模态内部的下一个和上一个按钮时，无法使动画（淡入淡出）在模态上工作

Question

我正在使用 ReactJS 应用程序，它映射 div 中显示的对象数组。当我单击每个 div 时，会出现一个模态，显示模态上相应的对象数据。

模态框上有上一个和下一个按钮。当您单击下一步按钮时，模态框会显示第二个对象数据，进一步单击它会显示第三个对象数据。

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

我正在使用 react-reveal 库在模态内的文本上显示淡入淡出动画。当我单击 dividual DIV 时，会出现带有相应对象数据的模态，并且动画会在其上运行。

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

如何在从 MODAL 中单击 Prev 和 Next 按钮时使动画工作。

工作代码是::

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;

App.css

.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;
}

沙盒工作版本在这里：

https://codesandbox.io/s/long-sun-9u00h

Answer 1

您必须通过将 key 添加到 Fade 元素来强制播放动画。 see the codebox

在反应应用程序中单击模态内部的下一个和上一个按钮时，无法使动画（淡入淡出）在模态上工作

unable to make the animation(fade) work on a modal when clicking the next and previous button from inside the modal in a react app

javascript

reactjs

react-responsive-modal

App.js

App.css