React模态框关闭时下滑动画实现求助

问题 #

已用React和CSS实现模态框，打开时有从底部向上滑动的动画，但关闭时无法实现向下滑动的动画。

解决方案 #

当前通过isModalOpen &&条件渲染模态框，关闭时组件会立即卸载，无法执行动画。需要调整逻辑：先触发关闭动画，等动画完成后再卸载组件，具体步骤如下：

• 添加关闭动画的CSS关键帧
• 用状态控制模态框的显示类，而非直接卸载
• 监听动画结束事件，完成后再隐藏模态框

修改后的代码 #

React组件代码

import "./styles.css";
import { useState, useRef } from "react";

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isClosing, setIsClosing] = useState(false);
  const modalContentRef = useRef(null);

  const handleClose = () => {
    setIsClosing(true);
    modalContentRef.current.addEventListener('animationend', handleAnimationEnd);
  };

  const handleAnimationEnd = () => {
    setIsModalOpen(false);
    setIsClosing(false);
    modalContentRef.current.removeEventListener('animationend', handleAnimationEnd);
  };

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>open</button>
      {isModalOpen && (
        <div className="modal-overlay">
          <div 
            ref={modalContentRef}
            className={`modal-content ${isClosing ? 'modal-content--closing' : ''}`}
          >
            <div className="feedbackModalHeader">
              <img
                src="/assets/dislike_modal.svg"
                alt=""
                className="dislikeBtnNonFilled"
              />
              <p className="provideFeedback">Provide additional feedback</p>
            </div>
            <button onClick={handleClose}>close</button>
          </div>
        </div>
      )}
    </div>
  );
}

CSS代码

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
  opacity: 1;
}

* {
  max-width: 100%;
}

.modal-content {
  background: #f5f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  z-index: 999;
  transform: translateY(100%);
  animation: slide-up 0.3s ease-out forwards;
  width: 59rem;
  margin-left: auto;
  margin-right: auto;
  height: 21rem;
  position: relative;
  left: 2rem;
}

.modal-content--closing {
  animation: slide-down 0.3s ease-out forwards;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.provideFeedback {
  font-size: 20px;
}

.feedbackModalHeader {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.8rem;
}

说明 #

点击关闭按钮时，先给模态框添加modal-content--closing类触发向下滑动动画；通过useRef获取模态框DOM元素，监听animationend事件，动画结束后再设置isModalOpen为false完成组件卸载，同时可配合给overlay添加淡出动画提升视觉连贯性。

内容的提问来源于stack exchange，提问作者tarun