代码之家 › 专栏 › 技术社区 › Inzen

Framer Animation,使用AnimatePresence、motion.div和唯一关键点,我无法退出工作

framer-motion nextjs13 next.js reactjs

Inzen · 技术社区 · 3 年前

你好,谢谢你抽出时间!:D

我正在努力让Framer运动完全发挥作用。我的“代码”适用于除出口之外的所有功能。我也有一把独特的钥匙。我在想,如果里面有孩子,会有问题吗?虽然这对我来说没有意义。有什么线索或错误是我没有看到的吗?

 <AnimatePresence>
      {modalOpen && (
        <motion.div
          key="boxid"
          initial={{ y: "50%", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.3, ease: "easeInOut" }}
          exit={{ y: "50%", opacity: 0, transition: { duration: 2 } }}
          className="absolute bottom-0 bg-white flex rounded-t-2xl w-[85%] h-[80%] border-[#26516eff] border-x-4 border-t-4"
        >
          <div className="flex flex-col mt-4 px-4  w-full">
            <div className="flex justify-center align-middle self-end">
              <button
                className="createAnAccount-bg text-white rounded-full"
                onClick={() => setModalOpen(false)}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="2.0rem"
                  height="2.0rem"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L12 13.4Z"
                  />
                </svg>
              </button>
            </div>

            <h2 className="text-2xl mb-4">
              Install this web app on your iPhone:
            </h2>
            {browserName === "safari" ? safariInstructions : chromeInstructions}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
    ```

1 回复 | 直到 3 年前

Inzen 3 年前

它决定自己工作。在我发布这个问题之前,我把钥匙改成了盒子。我检查了提交和之间的更改,但没有更改任何内容。

不管怎样,这就是它的样子,以防我错过了什么。

 <AnimatePresence>
      {modalOpen && (
        <motion.div
          key="box"
          initial={{ y: "50%", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.3, ease: "easeInOut" }}
          exit={{ y: "50%", opacity: 0, transition: { duration: 0.3 } }}
          className="absolute bottom-0 bg-white flex rounded-t-2xl w-[85%] h-[80%] border-[#26516eff] border-x-4 border-t-4"
        >
          <div className="flex flex-col mt-4 px-4  w-full">
            <div className="flex justify-center align-middle self-end">
              <button
                className="createAnAccount-bg text-white rounded-full"
                onClick={() => setModalOpen(false)}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="2.0rem"
                  height="2.0rem"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L12 13.4Z"
                  />
                </svg>
              </button>
            </div>

            <h2 className="text-2xl mb-4">
              Install this web app on your iPhone:
            </h2>
            {browserName === "safari" ? safariInstructions : chromeInstructions}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
    ```