애니메이션이 조건 렌더링을 중지합니다...!!!
1183 단어 reactjavascriptnextjs
const Products = ({
product: { name, displayImage, subtitle, price, uuid, slug },
}) => {
const [show, setShow] = useState(false);
const clickVariants = {
opened: {
top: "50vh",
},
closed: {
top: "0vh",
},
};
return (
<>
<div className="products">
<motion.button onClick={() => setShow((state) => !state)}>
Buy
</motion.button>
</div>
{show && (
<>
<div
onClick={() => setShow((state) => !state)}
className="backdrop"
></div>
<motion.div
initial={false}
animate={show ? "opened" : "closed"}
variants={clickVariants}
className="modal__container"
>
<h1>{name}</h1>
</motion.div>
</>
)}
</>
);
};
export default Products;
조건을 추가할 때 팝업 애니메이션을 실행할 수 없는 이유를 알려주실 수 있습니까?나는 구글에서 검색해 보았지만 아무것도 나에게 맞지 않았다.
Reference
이 문제에 관하여(애니메이션이 조건 렌더링을 중지합니다...!!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gurupal/animation-stop-working-on-conditional-rendering-2lol텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)