反应模态的滑动动画
P粉514458863
P粉514458863 2023-08-30 22:49:29
0
1
574
<p>我已经在react和css中实现了一个模态,目前,当我打开它时,我已经实现了一个向上滑动的动画,其中模态从底部向上滑动,但是当我关闭它时我希望它向下滑动,我无法弄清楚如何准确创建向下滑动的动画,有人可以帮忙吗? 代码=></p> <pre class="brush:php;toolbar:false;">import "./styles.css"; import react, { useState } from "react"; export default function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <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">Provide additional feedback</p> </div> <button onClick={() => setIsModalOpen(false)}> close </button> </div> </div> )} </div> ); }</pre> <p>css 代码=></p> <pre class="brush:php;toolbar:false;">.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; } * { max-width: 100%; } .modal-content { background: #f5f0f0; padding: 20px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); z-index: 999; transform: translateY(100%); animation: slide-up 0.3s ease-out forwards; width: 59rem; border-radius: 8px; margin-left: auto; margin-right: auto; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%); height: 21rem; position: relative; left: 2rem; } @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .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; }</pre> <p>代码沙箱链接 => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css</p>
P粉514458863
P粉514458863

全部回复(1)
P粉846294303

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

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

首先,定义 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 属性以适合您的特定用例。

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板