애니메이션이 조건 렌더링을 중지합니다...!!!

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;
조건을 추가할 때 팝업 애니메이션을 실행할 수 없는 이유를 알려주실 수 있습니까?나는 구글에서 검색해 보았지만 아무것도 나에게 맞지 않았다.

좋은 웹페이지 즐겨찾기