Page Transitions

Au moment où j'écris ceci, firefox ne supporte pas les transitions de page donc il faudra les tester dans un autre navigateur. Que voulez vous, rien n'est parfait.

Simple

Avant, il fallait écrire pas mal de javascript, pour créer, manipuler, et retirer des éléments sur la page quand on cliquait sur un lien pour rendre le changement fluide.

Maintenant on peut jetter ça dans notre css global

@view-transition {
  navigation: auto;
}

... et c'est tout, 🫳🎙️⬇️.

Plus exactement, il faut que ce soit dans le CSS de votre page de départ ET de votre page d'arrivé. Mais si c'est dans le CSS commun à toutes vos pages, ça revient au même.

Et l'effet de cette déclaration va être d'activer la transition de page...

Custom

... mais elle va l'activer avec les valeurs par défaut, ce qui fait qu'on va juste passer l'opacité de la vieille page de 1 vers 0 et inversement pour la nouvelle page. Ce qui n'est peut être pas ce qu'on veut.

Pour contrôler le style de la transition de sortie on utilise le sélecteur ::view-transition-old(root), et pour la transition d'entrée on utilisé le sélecteur ::view-transition-new(root).

D'une manière un peu regrettable, il faut leur donner des animations, même si on parle de "transition de page".

Voici un exemple dans lequel on va faire rétrecir la page de départ en plus de la faire disparaitre:

@keyframes shrink-out {
  from {
    transform: scale(100%);
    opacity: 1;
  }

  to {
    transform: scale(90%);
    opacity: 0;
  }
}

::view-transition-new(root) {
  animation: 0.3s ease-out both shrink-out reverse;
}

::view-transition-old(root) {
  animation: 0.3s ease-out both shrink-out;
}

Sync

C'est intéressant à noter que l'on peut définir des propriétés communes au deux, via le sélecteur ::view-transition-group(root), ce qui peut être intéressant pour garantir une durée égale sur toutes les animations.

::view-transition-group(root) {
  animation-duration: 0.5s;
}

Ils sont organisé comme ceci, et donc tout ce qu'on a vu jusqu'ici sur le comportement de la cascade s'applique.

::view-transition {
  ::view-transition-group(root){
    ::view-transition-image-pair(root){
      ::view-transition-old(root)
      ::view-transition-new(root)
    }
  }
}

Je suis special!

Il est possible de donner des transitions particulières à certains elements.

On pourrait garder uniquement le changement d'opacité pour la page et mettre le changement d'echelle sur les titres, pour qu'ils "sautent" à l'écran.

D'abord il va falloir accrocher un view-transition-name à tous les éléments qui doivent recevoir une animation différente.

Comme ceci:

h1,h2,h3,h4,h5 {
  view-transition-name: titles;
}

Comme ça, je peux utiliser les sélecteurs ::view-transition-old(titles) et ::view-transition-new(titles) pour leur donner un comportement spécifique.

@keyframes inflate {
  from {
    transform: scale(0%);
  }

  to {
    transform: scale(100%);
  }
}

::view-transition-new(titles) {
  animation: 0.3s ease-out both inflate;
}

::view-transition-old(titles) {
  animation: 0.3s ease-out both inflate reverse;
}

Et donc on peut mieux comprendre la hiérarchie vue plus tôt, puisque maintenant nos éléments intermediaire entre deux pages ressemble à ceci

::view-transition{
  ::view-transition-group(root){
    ::view-transition-image-pair(root){
      ::view-transition-old(root)
      ::view-transition-new(root)
    }
  }
  ::view-transition-group(titles){
    ::view-transition-image-pair(titles){
      ::view-transition-old(titles)
      ::view-transition-new(titles)
    }
  }
}

Ici "image" se réfère aux éléments qu'on sauvegarde sous forme d'"images" le temps de faire la transition entre deux pages.