Les transitions de plongeon des orteils

Franchement, l'API de transition View est un peu intimidante pour moi. De nombreux tutoriels montrent des démonstrations impressionnantes sur la façon dont nous animons la conversion entre deux pages, qui commencent généralement par l'exemple le plus simple:

@view-transition {
  navigation: auto;
}

Mais c'est généralement la fin de la partie simple, et le tutoriel creuse ensuite dans le domaine JavaScript. Bien sûr, ce n'est rien de mal, mais c'est un énorme saut pour quelqu'un comme moi qui apprend étape par étape. J'ai donc été inspiré quand j'ai vu l'oncle Dave et Jim Neilsen partager sur une technique de conversion très pratique (le titre).

Vous pouvez voir comment cela fonctionne sur le site Web de Jim:

C'est exactement la parfaite expérience "collation" où j'aime essayer de nouvelles choses. Il commence par le même extrait de code @view-transition qui est utilisé pour rejoindre les deux pages à l'API de transition View: la page actuelle et la page que vous souhaitez naviguer. De là, nous pouvons les considérer comme des pages "nouvelles" et "anciennes", respectivement.

J'ai également réalisé le même effet sur mon blog personnel:

C'est un exercice parfait pour un blog, non? Il définit d'abord view-transition-name sur l'élément que nous voulons participer à la conversion, dans ce cas le titre de l'article sur l'ancienne page et le titre de l'article sur la page "nouvelle".

Donc, si nos balises sont les suivantes:

<h1 id="Notes">Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

… Nous pouvons leur donner le même view-transition-name dans CSS:

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

Dave a rapidement souligné que nous pouvons assurer le respect des utilisateurs qui préfèrent réduire l'exercice et que ce paramètre n'est appliqué que si leurs préférences système permettent l'exercice:

@media not (prefers-reduced-motion: reduce) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

S'il n'y a que ces deux éléments sur la page, cela fonctionnera correctement. Mais nous avons une liste de liens d'articles, qui doivent tous avoir leur propre view-transition-name unique. C'est là que Jim a des difficultés dans son travail, car comment faites-vous exactement cela lorsqu'il s'agit de publier de nouveaux articles de blog? Devez-vous modifier votre CSS et trouver un nouveau nom de conversion chaque fois que vous souhaitez publier de nouveaux contenus? Non, il doit y avoir une meilleure façon.

c'est le cas. Ou, au moins à l'avenir. Ce n'est tout simplement pas encore standard. En fait, Bramus a écrit cela récemment tout en discutant des travaux de Chrome sur la fonction attr(), qui pourra générer une série d'identifiants uniques dans une déclaration. Regardez ce futur CSS:

.card[id] {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
  view-transition-class: card;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div></custom-ident>

génial! Je veux l'utiliser maintenant! Il est dommage que non seulement attendez que Chrome le développe, mais aussi que d'autres navigateurs l'adoptent et la mettent en œuvre, alors qui sait quand nous pouvons réellement l'obtenir. Pour le moment, la meilleure façon est d'utiliser une logique de programmation directement dans le modèle. Mon site Web s'exécute sur WordPress afin que je puisse accéder à PHP et générer un style en ligne qui définit view-transition-name sur les deux éléments.

Le titre de l'article est dans le modèle de mon article de blog individuel. Dans WordPress Jargon, c'est le fichier single.php.

@view-transition {
  navigation: auto;
}

Les liens d'article sont situés dans le modèle de l'archive de l'article. Dans WordPress, c'est généralement archive.php:

<h1 id="Notes">Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

Voir ce qui s'est passé là-bas? L'attribut view-transition-name est défini directement sur deux éléments de conversion en ligne, en utilisant PHP pour générer des noms en fonction de l'ID attribué de l'article dans WordPress. Une autre façon consiste à ajouter une balise <style></style> au modèle et à y mettre la logique. Les deux méthodes sont également maladroites par rapport à ce que vous pouvez réaliser à l'avenir, alors choisissez celle que vous aimez. attr()

Surtout, ces deux éléments partagent maintenant le même

et nous avons rejoint view-transition-name. Avec ces deux éléments, la conversion peut fonctionner! Nous n'avons même pas besoin de définir @view-transition (mais vous le pouvez) car la conversion par défaut fait tout le levage. @keyframes

Dans le même esprit "léger", j'ai vu le dernier numéro de Modern Web Weekly, et j'aime utiliser cette petite transition de vue sur le bouton radio:

Notez que JavaScript est nécessaire pour bloquer le comportement de clic par défaut des boutons radio afin que la conversion soit autorisée à s'exécuter avant la sélection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!