如何让React切换侧边栏子项时触发Framer Motion卸载动画？

核心问题分析 #

当前动画仅在「有无子项的菜单状态切换」时触发，原因是触发逻辑只依赖了「菜单项是否包含子项」这一状态。当两个都带子女的菜单切换时，这个状态没有变化，因此动画不会执行。我们需要把菜单项的唯一标识也纳入动画的触发条件。

具体修改步骤 #

• 给菜单项添加唯一标识
  为每个菜单数据项（尤其是带子项的About、Contact）添加唯一id字段，比如：

  const menuItems = [
    // ...其他项
    { title: 'About', id: 'about', children: [...] },
    { title: 'Contact', id: 'contact', children: [...] }
  ];
  

• 修改动画触发的依赖条件
  在SidebarListItem.jsx中，找到控制透明度与模糊动画的逻辑（无论是useEffect依赖还是framer-motion的动画触发条件），将原来仅依赖hasChildren的配置，改为同时依赖菜单项的唯一标识（比如item.id）。

  比如使用useEffect控制显隐的场景：

  const [showContent, setShowContent] = useState(true);
  
  useEffect(() => {
    setShowContent(false);
    const timer = setTimeout(() => setShowContent(true), 300);
    return () => clearTimeout(timer);
  }, [hasChildren, item.id]); // 新增item.id作为依赖项
  

  如果是直接使用framer-motion的animate属性，需将动画目标与当前选中的菜单项绑定：

  <motion.div
    animate={{
      opacity: activeId === item.id ? 1 : 0,
      filter: activeId === item.id ? 'blur(0)' : 'blur(4px)'
    }}
    transition={{ duration: 0.3 }}
  >
    {/* 子项内容容器 */}
  </motion.div>
  

• 确保选中状态正确更新
  确认侧边栏的选中逻辑中，点击不同带子项的菜单时，activeId（或类似的选中状态变量）会同步更新为当前菜单项的id，这样动画的依赖项才会触发变化。

关键逻辑说明 #

动画触发的核心是依赖项的变更，只要把菜单项的唯一标识加入动画的依赖列表，即使两个菜单项都包含子项，只要切换时标识发生变化，就会触发透明度与模糊动画的重新执行。

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