JavaScript实现缩略图到全宽图像页的平滑过渡

Question

http://manifesto.clapat.com/

如果您在主页上点击任何项目，您将从缩略图过渡到全屏图像，该图像将成为该项目页面的标题。这些过渡效果是如何创建的，以及最好的方式是使用内部路由而不是React Router来实现它们，但如果有人能够使其与React Router一起工作，我也可以进行移植。

有一些教程可以找到，但它们都在同一页上加载数据，类似于全屏模态组件，而不是转到另一个/项目页面。主要目标是在保持图像作为加载状态的同时，过渡到其他页面。

Answer 1

你需要服务器端渲染来实现这个效果，因为普通的渲染方式会在你跳转到页面后才开始加载图片。在Next.js中，通过Link元素访问的所有页面都是预渲染的，只要你在包含指向该页面的元素的页面上。

为了实现这个效果，首先你需要在CSS中将图片的position设置为fixed，然后创建一个过渡效果，将图片缩放到width: 100%和height: 100%，过渡时间设置为500毫秒，还需要设置一个定时器，在过渡结束后自动跳转到下一个已经将图片作为背景的页面。我不知道你是否需要这样做，但是在某个地方包含一个，这样页面就会被预渲染，并且在路由到该页面时图片会立即加载。

第一个页面：

const router = useRouter();

const [transitionStarted, setTransitionStarted] = useState<boolean>(false);

function handleClick() {
  setTransitionStarted(true);

  setTimeout(() => {
    router.push("/next-page");
  }, 500)
}

return (
  <div>
    <Link className="hidden" href="/next-page" />
    <Image 
      className={`duration-500 ${transitionStarted ? "fixed w-full h-full top-0 left-0" : ""}`} 
      onClick={handleClick}> 
      src="path-to-image" 
      fill 
      alt="image link" />
  </div>
  
)

下一个页面：

return (
  <div>
    <Image className="fixed w-full h-full top-0 left-0" fill alt="image that is used as background on next page" />
  </div>
)

我在tailwindcss中编写了这个示例，以便更易读，但你可以在任何其他CSS库中实现相同的效果。为了使过渡平滑，你只需要将过渡持续时间和setTimeout的持续时间设置为相同，这样页面只有在过渡完成且两个页面上的图片完全相同时才会重定向。

希望我给出了你所需要的答案。如果需要查看示例中的类是做什么的，可以查看tailwindcss文档。