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

Question

I am using a ReactJS application which is mapping over an array of objects displayed in a div. When I click each div then a modal appears which shows the corresponding objects data on modal.

It has a previous and next button on the modal. When you click on the next button then the modal displays the second objects data and further clicking it displays the third objects data.

Same goes for the previous button but in a reverse direction.

I am using a react-reveal library for showing Fade animation on texts inside a modal. When I click individual DIV then the modal appears with corresponding object data and animation works on that.

But when I click Previous and Next button from INSIDE the modal then corresponding data of next object do appear but the animation doesnot work on the texts.

How can I make the animation work upon clicking Prev and Next button from inside the MODAL.

The working code is::

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

The sandbox working version is here:

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

Answer 1

you have to force the animation by adding key to Fade elements. see the codebox