Afficher les transitions en dehors de la fenêtre

Les transitions de vue CSS ont atterri dans Chrome et sont désormais (pour le meilleur ou pour le pire) largement disponibles pour la plupart des utilisateurs finaux. Safari n'est pas loin derrière, la fonctionnalité étant disponible dans TP et Firefox y travaille au moins.

J'aime à quel point la mise en œuvre des transitions sur plusieurs pages est devenue plus simple, mais en même temps, j'ai réalisé une grosse bête noire avec elles : les éléments qui sont hors de la fenêtre d'affichage commencent à tourbillonner sauvagement.

Mon blog traite de cela avec du Javascript. Un IntersectionObserver définit le nom de transition de vue dans une propriété personnalisée lorsqu'il est visible. Tant qu’elle est hors de vue, la propriété n’est pas définie et la transition ne se déclenche pas. Cela fonctionne, mais il faut que HTML, Javascript et CSS dépendent les uns des autres. Dans l’esprit de conserver les questions de présentation au CSS, j’aimerais une solution plus simple.

Une autre fonctionnalité qui pourrait être utile a récemment atterri dans Chrome : les animations pilotées par défilement. Malheureusement, cela n’est encore disponible que dans Chrome. Firefox l'a derrière un drapeau et Safari ne montre aucun signe d'activité ici. Mais nous pouvons nous rabattre gracieusement, soit sur la solution Javascript mentionnée précédemment, soit même simplement ignorer la détection de la fenêtre d'affichage et afficher quand même l'animation (ce serait le cas dans Safari au moment de la rédaction).

Une transition simple

Rassemblons tout cela, en commençant par la transition de vue elle-même :

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

<!-- on page1.html: -->
<div data-view-transition>Whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>Whoosh!</div>

Vous verrez maintenant le div de page1.html se transformer en sa version sur page2.html lors de la navigation. La règle at @view-transition en CSS lance également un fondu enchaîné sur l'ensemble du document. La durée de transition est fixée par défaut à 0,4s, mais nous pouvons utiliser quelques lignes pour contrôler cela :

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

::view-transition-group(*) {
    animation-duration: var(--view-transition-duration);
}

La durée est définie par --view-transition-duration La règle @property en haut est entièrement facultative, mais elle permet à la durée de l'animation de retomber à 0,4 s au lieu d'une valeur invalide lorsque nous définissons --view- durée de transition : fausse.

Gérer la fenêtre

Pourtant, lorsqu'un élément est en dehors de la fenêtre d'affichage au moment d'une transition de page, il s'animera toujours, et passera parfois dans ou sur tout l'écran visible sans indiquer d'où il vient ni où il va. Je trouve ce comportement très irritant.

Avec les animations pilotées par défilement, nous disposons désormais d'un outil capable de contrôler les styles en fonction d'un défilement et d'une position relative à la fenêtre d'affichage. Nous pouvons donc également contrôler le déclencheur des transitions de vue :

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

L'animation d'image clé activate-vt ne peut pas passer facilement de none à une propriété personnalisée avec une chaîne de texte, elle effectuera donc une coupe difficile. La plage d'animation se déclenche lorsque l'élément entre ou quitte la fenêtre, même partiellement. L'animation elle-même définit --enable-view-transition sur 0,1 % et 99,9 % pour se déclencher aussi rapidement que possible. Je souhaite activer les transitions de vue dès que nous pouvons avoir une idée de l'endroit où l'animation a commencé ou s'est terminée.

Enfin, --enable-view-transitions est défini par l'animation de défilement sur none ou sur une nouvelle propriété personnalisée appelée --view-transition-name. Il est réglé entre 0,1 % et 99,9 % de la couverture de l'écran, désactivant les transitions de vue au-dessus et au-dessous de la fenêtre (ou à gauche et à droite, quelle que soit la façon dont vous souhaitez la tenir). Cette nouvelle propriété est utile pour définir des animations individuelles sur différents éléments. Chaque élément peut obtenir sa propre transition en définissant une valeur unique sur --view-transition-name.

<div data-view-transition>



<p>Cela doit être fait à la fois sur la page source et sur la page cible. Si aucune valeur n'est définie, la valeur par défaut est default-view-transition qui contrôle uniformément tous les éléments data-view-transition restants.</p>

<h2>
  
  
  Mise en œuvre dans le monde réel
</h2>

<p>J'ai ajouté cette implémentation à mon petit passe-partout CSS, Ssstyles. Donner à un élément l'attribut data-view-transition sur les pages source et cible lui permettra de passer de l'une à l'autre. Lui donner un --view-transition-name lui permettra d'avoir sa propre animation unique, indépendante des autres éléments similaires. La définition de --view-transition-duration contrôle la durée de la transition.</p>


          

            
        

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!