我正在嘗試創建一個div帶有fixed位置的影片。基本上我希望當 5 秒傳遞 aclass被添加到這個div并被animation制作時，但由于某種原因，它沒有發生。
我究竟做錯了什么？
import { useRef, useEffect } from "react";
export default function Modal() {
const modal = useRef(null);
useEffect(() => {
setTimeout(() => {
modal.current.classList.add("modalShow");
}, 5000);
}, []);
return <div id="modal" ref={modal} className="modalContainer "></div>;
}
.modalContainer {
position: fixed;
height: 100%;
width: 100%;
background: red;
animation: all 5s ease-out;
transform: translateY(100%);
}
.modalShow {
transform: translateY(0%);
}
.modalHide {
transform: translateY(100%);
}
這是我的實時代碼：
實時代碼
謝謝！
uj5u.com熱心網友回復：
您沒有使用@keyframes.
改變：
animation: all 5s ease-out;
到：
transition: all 5s ease-out;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/352868.html