Next.js中useRef结合map定位DOM时动画仅生效于最后元素的问题排查

问题原因 #

你将同一个pp2 ref绑定到了所有<Link>元素上，在map循环中每次迭代都会覆盖pp2.current的值，最终它只会指向循环生成的最后一个Link元素，所以调用show()时只有最后一个元素能加上animation类。

解决方案 #

推荐用React状态控制动画类的添加（更符合React开发范式），也可以用ref数组存储每个Link的引用直接操作DOM，两种方案如下：

方案1：状态驱动（优先推荐） #

通过状态变量控制菜单展开状态，给每个Link元素分配动态类名和延迟动画：

export default function Header() {
  const pp = useRef(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  function show() {
    pp.current.classList.add("right-0");
    pp.current.classList.remove("-right-2/3");
    setIsMenuOpen(true);
  }

  function close() {
    pp.current.classList.remove("right-0");
    pp.current.classList.add("-right-2/3");
    setIsMenuOpen(false);
  }

  const pagename: string = usePathname();
  const ll = links.map((e, i) => {
    const animationClass = isMenuOpen ? "animation" : "";
    // 按索引设置不同延迟，实现菜单依次弹出效果
    const delayStyle = { animationDelay: `${0.1 + i * 0.1}s` };

    return (
      <Link 
        className={`font-bold text-2xl hover:opacity-50 ${animationClass}`}
        style={delayStyle}
        key={e.name}
        href={e.href}
      >
        {e.name}
      </Link>
    );  
  });

  // 其余导航栏代码...
}

CSS动画保留原逻辑，建议添加animation-fill-mode确保动画结束后状态不变：

.animation {
  animation-name: shop-animation;
  animation-duration: 1s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes shop-animation {
  0% {
    opacity: 0;
    transform: translate(0px, 10px);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

方案2：Ref数组操作DOM #

如果需要直接操作DOM，用ref数组存储每个Link的引用：

export default function Header() {
  const pp = useRef(null);
  // 创建空数组ref存储所有Link元素
  const linkRefs = useRef<(HTMLAnchorElement | null)[]>([]);

  function show() {
    pp.current.classList.add("right-0");
    pp.current.classList.remove("-right-2/3");
    // 遍历ref数组给每个Link加动画类和延迟
    linkRefs.current.forEach((ref, index) => {
      if (ref) {
        ref.classList.add("animation");
        ref.style.animationDelay = `${0.1 + index * 0.1}s`;
      }
    });
  }

  function close() {
    pp.current.classList.remove("right-0");
    pp.current.classList.add("-right-2/3");
    // 关闭时移除所有Link的动画类
    linkRefs.current.forEach((ref) => {
      if (ref) ref.classList.remove("animation");
    });
  }

  const pagename: string = usePathname();
  const ll = links.map((e, i) => {
    return (
      <Link 
        ref={(el) => (linkRefs.current[i] = el)}
        className="font-bold text-2xl hover:opacity-50"
        key={e.name}
        href={e.href}
      >
        {e.name}
      </Link>
    );  
  });

  // 其余导航栏代码...
}

关键提示 #

• 状态驱动的方式更契合React数据流逻辑，代码更易维护，避免直接操作DOM的潜在问题。
• 给不同Link设置不同动画延迟，能让菜单弹出更有层次感，提升交互体验。

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