为什么framermotion嵌套运动不起作用？

Question

我在嵌套运动方面遇到问题，外部 Motion.div 可以正常工作，但是使用布局 id 嵌套的则不能。我注意到当我从此 div 中删除外部运动时，内部 Motion.div 会起作用。问题是如何做到这一点才能同时发挥作用。

"use client";
import { links } from "@/lib/data";
import { motion } from "framer-motion";
import Link from "next/link";
import { act, useState } from "react";
import { Divide, Squash as Hamburger } from "hamburger-react";

const Navbar = () => {
  const [activeSection, setActiveSetcion] = useState("Home");
  const [draverOpen, setDraverOpen] = useState(false);

  return (
    <>
      <motion.div
        className="fixed z-10 top-0 sm:rounded-full sm:shadow-md sm:top-5 h-[4.5rem] sm:bg-opacity-80 backdrop-blur-[0.5rem] sm:h-[3rem] w-full sm:w-[30rem] bg-slate-50 bg-opacity-70 sm:bg-white left-1/2 -translate-x-[50%]"
        initial={{ y: -100, x: "-50%", opacity: 0 }}
        animate={{ y: 0, x: "-50%", opacity: 100 }}
        layout
      >
        <div className="sm:hidden w-full h-full px-8 flex items-center justify-between">
          <p className="font-semibold tracking-tighter text-xl selection:bg-main-purple selection:text-white">
            Szymon Fularczyk
          </p>
          <div className="cursor-pointer">
            <Hamburger
              size={25}
              toggled={draverOpen}
              toggle={() => setDraverOpen(!draverOpen)}
            />
          </div>
        </div>
        <nav className="hidden sm:block h-full ">
          <ul className="flex h-full items-center justify-evenly">
            {links.map((link) => (
              <li key={link.name} className="relative">
                <Link
                  className={`text-sm  ${
                    activeSection === link.name
                      ? "text-main-font"
                      : "text-gray-400"
                  }`}
                  href={link.hash}
                  onClick={() => setActiveSetcion(link.name)}
                >
                  {link.name}
                  {link.name === activeSection && (
                    <motion.div
                      layoutId="setActiveSetcion"
                      className="absolute top-0 left-0 w-full h-full bg-red-600"
                    ></motion.div>
                  )}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </motion.div>
      <div
        className={`fixed sm:hidden top-0 w-[60%] z-30 h-full bg-main-purple ease-in-out duration-500 ${
          draverOpen ? "left-0" : "left-[-100%]"
        }`}
      ></div>
      <div
        onClick={() => setDraverOpen(false)}
        className={`z-20 sm:hidden fixed top-0 left-0 w-screen h-screen bg-black ${
          draverOpen ? "bg-opacity-50 cursor-pointer" : "bg-opacity-0 hidden"
        }`}
      ></div>
    </>
  );
};

export default Navbar;

我尝试从 div 中删除外部运动，它可以工作，但我仍然需要该 div 上的初始动画

Answer 1

问题可能是您使用条件渲染来渲染内部 Motion.div，而不是使用三元运算符，当条件为 false 时，三元运算符将渲染 null。我想知道成帧器运动是否需要明确返回 null 才能正常工作。在他们的文档中，使用带有layoutId的motion.div的示例是使用三元运算符：

<li>
  {label}
  {isSelected
    ? <motion.div layoutId="underline" />
    : null}
</li>  

https://www.framer.com/motion/layout-group/