JavaScript implementiert einen reibungslosen Übergang von der Miniaturansicht zur Bildseite in voller Breite

Question

http://manifesto.clapat.com/

Wenn Sie auf der Startseite auf ein beliebiges Element klicken, wechseln Sie von einer Miniaturansicht zu einem Vollbild, das zum Titel dieser Elementseite wird. Wie werden diese Übergangseffekte erzeugt und was wäre der beste Weg, sie mithilfe von internem Routing anstelle von React Router zu implementieren, aber wenn jemand es mit React Router zum Laufen bringen kann, kann ich das auch portieren.

Es sind einige Tutorials verfügbar, aber alle laden Daten auf derselben Seite, ähnlich einer modalen Vollbildkomponente, anstatt zu einer anderen Seite/Projektseite zu wechseln. Das Hauptziel besteht darin, zu anderen Seiten zu wechseln und gleichzeitig das Bild beim Laden beizubehalten.

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文档。