JavaScript melaksanakan peralihan lancar daripada lakaran kenit ke halaman imej lebar penuh

Question

http://manifesto.clapat.com/

Jika anda mengklik pada mana-mana item pada halaman utama, anda akan beralih daripada lakaran kenit kepada imej skrin penuh yang akan menjadi tajuk halaman item tersebut. Bagaimanakah kesan peralihan ini dicipta dan apakah cara terbaik untuk melaksanakannya menggunakan penghalaan dalaman dan bukannya Penghala Reaksi, tetapi jika sesiapa boleh membuatnya berfungsi dengan Penghala Reaksi, saya boleh mengalihkannya juga.

Terdapat beberapa tutorial yang tersedia, tetapi semuanya memuatkan data pada halaman yang sama, serupa dengan komponen mod skrin penuh, dan bukannya pergi ke halaman lain/projek. Matlamat utama adalah untuk beralih ke halaman lain sambil mengekalkan imej sebagai dimuatkan.

Answer 1

Anda memerlukan pemaparan sebelah pelayan untuk mencapai kesan ini, kerana kaedah pemaparan biasa hanya akan mula memuatkan imej selepas anda melompat ke halaman. Dalam Next.js, semua halaman yang diakses melalui elemen Pautan diprapaparkan selagi anda berada di halaman yang mengandungi elemen yang menunjuk ke halaman tersebut.

Untuk mencapai kesan ini, mula-mula anda perlu menetapkan kedudukan imej kepada tetap dalam CSS, kemudian buat kesan peralihan, skalakan imej kepada lebar: 100% dan ketinggian: 100%, tetapkan masa peralihan kepada 500 milisaat , dan juga perlu menetapkan Pemasa yang melompat secara automatik ke halaman seterusnya yang mempunyai imej sebagai latar belakang selepas peralihan tamat. Saya tidak tahu sama ada anda perlu melakukan ini, tetapi sertakan di suatu tempat supaya halaman itu akan diprapaparkan dan imej akan dimuatkan serta-merta apabila dihalakan ke halaman.

Halaman pertama:

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>
  
)

Halaman seterusnya:

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>
)

Saya menulis contoh ini dalam tailwindcss untuk menjadikannya lebih mudah dibaca, tetapi anda boleh mencapai kesan yang sama dalam mana-mana pustaka CSS lain. Untuk menjadikan peralihan lancar, anda hanya perlu menetapkan tempoh peralihan dan tempoh setTimeout adalah sama, supaya halaman hanya akan mengubah hala apabila peralihan selesai dan imej pada kedua-dua halaman adalah sama.

Semoga saya memberikan jawapan yang anda perlukan. Jika anda perlu melihat perkara yang dilakukan oleh kelas dalam contoh, anda boleh menyemak dokumentasi tailwindcss.