React+TypeScript中LayoutTransition页面过渡动画异常问题求助

Hey 兄弟，我看完你的问题了，这种页面过渡动画的bug确实头疼——明明landing页之间好好的，一涉及到带滚动的页面就穿帮，先看到目标页底部再播动画，完全破坏了过渡的流畅感对吧？我之前做类似的全屏过渡时也踩过几乎一样的坑，给你几个针对性的解决方案试试：

核心问题分析 #

其实你遇到的本质问题是：页面切换时，目标页面的DOM已经渲染并触发了滚动，而你的过渡遮罩动画还没完成全屏覆盖。尤其是从无滚动的landing页跳转到有长内容的页面时，浏览器会自动滚动到目标页的初始位置（或者因为内容过长直接撑出滚动条并显示底部），这就导致了"穿帮"。

具体解决步骤 #

1. 页面切换时先锁定滚动+强制回到顶部 #

在触发页面跳转的瞬间，先做两件事：

• 给body添加overflow: hidden样式，锁定当前页面的滚动，防止浏览器自动跳转到目标页的滚动位置
• 调用window.scrollTo(0, 0)，强制把当前页面滚回顶部，确保过渡遮罩是从干净的初始状态开始动画

你可以在LayoutTransition组件里封装一个跳转前的钩子函数，比如：

const handlePageChange = (to: string) => {
  // 锁定滚动
  document.body.style.overflow = 'hidden';
  // 回到顶部
  window.scrollTo(0, 0);
  // 触发遮罩全屏动画
  setIsTransitioning(true);
  // 等待遮罩覆盖完成后再执行页面切换
  setTimeout(() => {
    // 执行实际的路由跳转逻辑
    navigate(to);
    // 动画结束后解锁滚动（时长要和你的遮罩动画对应）
    setTimeout(() => {
      document.body.style.overflow = '';
      setIsTransitioning(false);
    }, 500);
  }, 300); // 延迟时长根据遮罩动画的覆盖速度调整
};

2. 延迟目标页面的DOM渲染 #

不要在页面切换的同时就渲染目标页面的内容，而是等过渡遮罩完全覆盖屏幕之后再渲染。你可以在布局组件里加一个状态控制：

// 在Layout组件中
const [isTransitioning, setIsTransitioning] = useState(false);
const location = useLocation();

// 监听路由变化触发过渡
useEffect(() => {
  // 路由变化时先开遮罩
  setIsTransitioning(true);
  // 等遮罩完全覆盖后，再让目标页面内容显示
  const coverTimer = setTimeout(() => {
    // 这里可以配合Outlet或者页面组件的渲染控制
    const hideTimer = setTimeout(() => setIsTransitioning(false), 500);
    return () => clearTimeout(hideTimer);
  }, 300);
  return () => clearTimeout(coverTimer);
}, [location.pathname]);

return (
  <div className="layout">
    {/* 遮罩未完成覆盖时，不渲染目标页面内容 */}
    {!isTransitioning && <Outlet />}
    {/* 过渡遮罩组件 */}
    <LayoutTransition isActive={isTransitioning} />
  </div>
);

这样就能保证，只有当遮罩完全盖住旧页面之后，新页面的内容才会渲染，从根本上避免穿帮。

3. 给LayoutTransition遮罩补全关键样式 #

检查你的layout.scss里的遮罩样式，确保它是全屏固定定位，并且层级足够高：

.layout-transition {
  position: fixed; // 必须用fixed，确保覆盖整个视口
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; // 要比所有页面内容的z-index都高
  background-color: #ffffff; // 替换成你的遮罩颜色
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(100%); // 初始状态在屏幕下方
  &.active {
    transform: translateY(0); // 动画时滑入全屏覆盖
  }
}

这里不要用absolute定位，因为absolute是相对于父容器的，当父容器是带滚动的页面时，遮罩可能无法覆盖整个视口。

4. 适配路由切换的时机（针对React Router） #

如果你用的是React Router，建议用useNavigate封装自定义跳转函数，先触发过渡动画再执行路由跳转，而不是直接用原生的跳转：

import { useLocation, useNavigate, Outlet } from 'react-router-dom';

const Layout = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [isTransitioning, setIsTransitioning] = useState(false);

  // 自定义跳转：先开遮罩再跳转
  const customNavigate = (to: string) => {
    setIsTransitioning(true);
    setTimeout(() => navigate(to), 300);
  };

  // 路由切换完成后关闭遮罩
  useEffect(() => {
    const timer = setTimeout(() => setIsTransitioning(false), 500);
    return () => clearTimeout(timer);
  }, [location.pathname]);

  return (
    <>
      <LayoutTransition isActive={isTransitioning} />
      {/* 把customNavigate传递给子页面的跳转按钮使用 */}
      <Outlet context={customNavigate} />
    </>
  );
};

调试小技巧 #

1. 打开浏览器的Performance面板，录制页面切换的过程，查看DOM渲染、动画触发、滚动事件的时间线，精准定位哪个环节先执行了
2. 暂时把过渡动画时长调长（比如2秒），慢动作下观察是遮罩没覆盖全，还是目标页提前渲染了

按照这些步骤调整后，应该就能达到你想要的"遮罩先全屏覆盖，再切换页面，最后遮罩收起"的流畅过渡效果了。

内容来源于stack exchange