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