JavaScript implémente une transition fluide de la miniature à la page d'image pleine largeur

Question

http://manifesto.clapat.com/

Si vous cliquez sur un élément de la page d'accueil, vous passerez d'une vignette à une image plein écran qui deviendra le titre de la page de cet élément. Comment ces effets de transition sont-ils créés et quelle serait la meilleure façon de les implémenter en utilisant le routage interne plutôt que React Router, mais si quelqu'un peut le faire fonctionner avec React Router, je peux également le porter.

Certains tutoriels sont disponibles, mais ils chargent tous les données sur la même page, similaire à un composant modal plein écran, plutôt que d'aller vers une autre page/projet. L'objectif principal est de passer à d'autres pages tout en conservant l'image au chargement.

Answer 1

Vous avez besoin d'un rendu côté serveur pour obtenir cet effet, car la méthode de rendu normale ne commencera à charger l'image qu'après avoir accédé à la page. Dans Next.js, toutes les pages accessibles via l'élément Link sont pré-rendues tant que vous êtes sur la page qui contient l'élément pointant vers cette page.

Pour obtenir cet effet, vous devez d'abord définir la position de l'image sur fixe en CSS, puis créer un effet de transition, redimensionner l'image en largeur : 100 % et en hauteur : 100 %, définir le temps de transition sur 500 millisecondes. , et vous devez également définir une minuterie qui passe automatiquement à la page suivante contenant une image en arrière-plan une fois la transition terminée. Je ne sais pas si vous devez faire cela, mais incluez un quelque part pour que la page soit pré-rendue et que l'image se charge immédiatement lorsqu'elle est acheminée vers la page.

Première page :

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

Page suivante :

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

J'ai écrit cet exemple dans tailwindcss pour le rendre plus lisible, mais vous pouvez obtenir le même effet dans n'importe quelle autre bibliothèque CSS. Pour rendre la transition fluide, il vous suffit de définir la durée de la transition et la durée de setTimeout pour qu'elles soient identiques, de sorte que la page ne soit redirigée que lorsque la transition est terminée et que les images des deux pages soient exactement les mêmes.

J'espère vous avoir donné la réponse dont vous aviez besoin. Si vous avez besoin de voir ce que font les classes de l'exemple, vous pouvez consulter la documentation tailwindcss.