Reaktive modale Gleitanimation

Question

Ich habe ein Modal in React und CSS implementiert und derzeit, wenn ich es öffne, habe ich eine Slide-Up-Animation implementiert, bei der das Modal von unten nach oben gleitet, aber wenn ich es schließe, möchte ich, dass es nach unten gleitet, das geht nicht Finden Sie heraus, wie Sie die Slide-Down-Animation genau erstellen. Kann mir jemand helfen? Code=>

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

Standardfunktion App() exportieren {
  const [isModalOpen, setIsModalOpen] = useState(false);

  zurückkehren (
    <div>
      <button onClick={() => setIsModalOpen(true)}>open </button>
      {isModalOpen && (
        <div className={`modal-overlay`}>
          <div className={`modal-content`}>
            <div className="feedbackModalHeader">
              <img
                src="/assets/dislike_modal.svg"
                alt=""
                className="dislikeBtnNonFilled"
              />
              <p className="provideFeedback">Zusätzliches Feedback geben</p>
            </div>
            <button onClick={() => setIsModalOpen(false)}>
          </div>
        </div>
      )}
    </div>
  );
}

css code=>

.modal-overlay {
  Position: fest;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Hintergrundfarbe: rgba(0, 0, 0, 0,5);
  Anzeige: Flex;
  align-items: center;
  rechtfertigen-Inhalt: Mitte;
  Z-Index: 9999;
  Übergang: Deckkraft 0,3 Sekunden;
}

* {
  maximale Breite: 100 %;
}

.modal-content {
  Hintergrund: #f5f0f0;
  Polsterung: 20px;
  Randradius: 4px;
  Box-Shadow: 0 2px 10px rgba(0, 0, 0, 0,15);
  Z-Index: 999;
  transform: TranslateY(100%);
  Animation: Slide-Up 0,3 Sek. Easy-Out nach vorne;
  Breite: 59rem;
  Randradius: 8px;
  Rand links: auto;
  Rand rechts: auto;
  Box-Shadow: 0 4px 20px 0 rgb(0 0 0 / 10 %), 0 1px 2px 0 rgb(0 0 0 / 6 %);
  Höhe: 21rem;
  Position: relativ;
  links: 2rem;
}

@keyframes slide-up {
  aus {
    transform: TranslateY(100%);
  }

  Zu {
    transform: TranslateY(0);
  }
}

.close-button {
  Position: absolut;
  oben: 10px;
  rechts: 10px;
  Grenze: keine;
  Hintergrund: transparent;
  Schriftgröße: 24px;
  Cursor: Zeiger;
}

.Rückmeldung geben {
  Schriftgröße: 20px;
}

.feedbackModalHeader {
  Anzeige: Flex;
  align-items: center;
  Lücke: 1,2rem;
  Rand oben: 0,8rem;
}

Code-Sandbox-Link => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css

Answer 1

您必须根据状态更改模式的类。 （条件类名）

这是一种使用您想要的内容创建模式的简单方法：

首先，定义 CSS 动画：

.modal-slide-down {
  animation-name: slide-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

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

然后，在您的 React 组件中，添加一个状态变量来跟踪模式是否应该打开或关闭：

const [isOpen, setIsOpen] = useState(false);

当用户单击按钮或执行其他操作来打开模式时，将 isOpen 状态设置为 true：

<button onClick={() => setIsOpen(true)}>Open Modal</button>

最后，根据 isOpen 状态有条件地将 CSS 类应用到模式：

<div className={`modal ${isOpen ? 'modal-slide-down' : ''}`}>
  {/* Modal content goes here */}
</div>

更多解释：

当isOpen状态为true时，模态组件中会添加modal-slide-down类，从而触发向下滑动动画。当 isOpen 状态为 false 时，modal-slide-down 类将被移除，从而触发上滑动画。

通过这些更改，模式将在打开时向下滑动到视图中，并在关闭时向上滑动回来。当然，您可能需要调整动画持续时间和其他 CSS 属性以适合您的特定用例。

希望我能够解决您的问题。