使用framer-motion实现自定义NavLink交错动画失效求助

问题根源 #

导航项同时显示的核心原因是：每个NavLink里的motion.li都独立设置了initial、animate和exit属性，这直接覆盖了父元素（motion.ul）的交错动画配置。父元素的staggerChildren需要子元素继承父的变体状态才能生效，而子元素硬编码动画状态后，父级的延迟交错规则完全失效。

修复步骤 #

1. 修改navLink.tsx #

移除motion.li上的initial、animate、exit属性，让子元素继承父元素的变体状态：

'use client';

import { motion } from 'framer-motion';

interface NavLinkProps {
    link: string;
    children: string;
}

const NavLink: React.FC<NavLinkProps> = ({link, children}) => {

    const linkItemVariants = {
        hidden: { opacity: 0, y: '50%' },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                duration: 0.5,
                ease: "easeOut"
            },
        },
        exit: {
            opacity: 0,
            y: '80%',
            transition: {
                duration: 0.3,
                ease: "easeOut"
            }
        },
    };

    return (
        <motion.li className="lg:mx-5 sm:mb-5 text-5xl lg:text-lg"
        variants={linkItemVariants}>
            <a href={link} aria-label={children}>
                {children}
            </a>
        </motion.li>
    );
};

export default NavLink;

2. 确认mobileNav.tsx父元素配置 #

父元素motion.ul的现有配置已经正确，无需修改，确保以下属性保留：

<motion.ul
  variants={navLinksVariants}
  initial="hidden" 
  animate="visible" 
  exit="exit">
    <NavLink link="#projects">Projects</NavLink>
    <NavLink link="#about">About</NavLink>
    <NavLink link="#contact">Contact</NavLink>
</motion.ul>

修复原理 #

• 当父级motion组件设置了variants并指定状态切换规则时，子级motion组件只要声明了variants，就会自动继承父级的状态变化。此时父级的staggerChildren和delayChildren就能精准控制每个子元素的动画触发时机。
• 之前子元素独立设置initial/animate，相当于每个导航项都直接执行自己的动画逻辑，完全脱离了父级的交错调度。

内容的提问来源于stack exchange，提问作者JimboNeutronbo