我在嵌套运动方面遇到问题,外部 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 上的初始动画
问题可能是您使用条件渲染来渲染内部 Motion.div,而不是使用三元运算符,当条件为 false 时,三元运算符将渲染 null。我想知道成帧器运动是否需要明确返回 null 才能正常工作。在他们的文档中,使用带有layoutId的motion.div的示例是使用三元运算符:
<li>
{label}
{isSelected
? <motion.div layoutId="underline" />
: null}
</li>