React Spring菜单退场动画失效问题求助

问题根源 #

• 组件提前卸载：Nav组件中通过{isOpen ? ... : ''}手动移除元素，导致React Spring的leave动画未执行完毕，组件就被销毁，无法显示退场效果。
• 动画参数不符需求：当前leave动画配置为向左滑出translate3d(-100%, 0, 0)，和需求的向下滑出不匹配。
• 过渡逻辑冲突：同时使用useTransition的item判断和Nav内的isOpen判断，双重控制导致动画执行逻辑混乱。

修复方案 #

1. 修正useTransition的leave动画配置 #

将leave的位移参数改为与from一致的向下位移，实现从底部滑入、底部滑出的效果：

// App.jsx
const animMenu = useTransition(isMenuOpen, {
  from: { opacity: 0, transform: 'translate3d(0, 1000%, 0)' },
  enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
  leave: { opacity: 0, transform: 'translate3d(0, 1000%, 0)' }, // 修改为向下滑出
});

2. 移除Nav组件内的isOpen判断 #

让React Spring完全控制组件的挂载与卸载，不再手动移除元素：

// Nav.jsx
import React from 'react';
import { animated } from 'react-spring';
import './scss/nav-styles.css';

const Nav = ({ toggle, style }) => {
  return (
    <animated.div className="menu" style={style}>
      <div onClick={toggle}>
        <a href="/">Home</a>
      </div>
      <div onClick={toggle}>
        <a href="/">About</a>
      </div>
      <div onClick={toggle}>
        <a href="/">Contact</a>
      </div>
      <div onClick={toggle}>
        <a href="/">Login</a>
      </div>
      <div onClick={toggle}>
        <a href="/">Sign Up</a>
      </div>
    </animated.div>
  );
};

export default Nav;

3. 简化Header的过渡渲染逻辑 #

直接通过useTransition的item状态控制Nav的渲染，移除冗余判断：

// Header.jsx
import React from 'react';
import './scss/header-styles.css';
import * as HiIcons from 'react-icons/hi';
import Nav from '../NavHam';

function Header({ anim, setIsMenuOpen }) {
  const handleToggle = () => {
    setIsMenuOpen(prev => !prev);
  };

  return (
    <header>
      <div className="nav-ham" onClick={handleToggle}>
        <HiIcons.HiMenu />
      </div>
      {anim((style, item) => item && <Nav toggle={handleToggle} style={style} />)}
    </header>
  );
}

export default Header;

4. 确保菜单容器CSS定位正确 #

为让translate3d位移效果正常生效，给.menu添加固定定位：

/* nav-styles.css */
.menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 2rem;
  /* 其他自定义样式 */
}

核心逻辑 #

React Spring的useTransition需要通过自身管理的item状态控制组件生命周期，才能完整执行enter和leave动画。如果手动提前移除组件，会直接中断leave动画流程，导致退场效果丢失。

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