Quelle est la Terre le descripteur des «types» dans les transitions?

Avez-vous déjà recherché quelque chose de nouveau uniquement pour trouver des informations rares? C'est le paradoxe frustrant mais excitant d'explorer le territoire numérique Uncharted. J'ai récemment rencontré cela tout en documentant le @view-transition AT-RULE et son types Descriptor.

Vous connaissez probablement les transitions de vue inter-documents: transitions alimentées par CSS entre les pages Web, nécessitant auparavant des cadres JavaScript et des bibliothèques d'animation. L'initiation d'une transition consiste à définir le descripteur navigation sur auto sur les deux pages, créant un effet croisé lisse.

@view-transition {
  navigation: auto;
}

Simple, non? navigation est le descripteur communément connu. Mais il y a un autre frère moins documenté: le descripteur types.

Comprendre le types Descripteur

Les transitions de vue inter-documents sont relativement nouvelles, donc une exploration complète est en cours. Étonnamment, le descripteur types est souvent négligé; Une certaine documentation l'omet entièrement. La spécification CSS fournit cette clarification:

Le descripteur types définit les types actifs pour la transition lors de la capture ou de l'exécution de la transition.

Plus précisément, types accepte une liste séparée par l'espace de noms de types actifs (comme <custom-ident></custom-ident>) ou none si aucun type actif ne s'applique.

• Nom: types
• pour: @view-transition
• Valeur: none | <custom-ident> </custom-ident>
• Initial: none

Exemples d'utilisations:

@view-transition {
  navigation: auto;
  types: bounce;
}

/* Or a list */
@view-transition {
  navigation: auto;
  types: bounce fade rotate;
}

Mais que sont les types "actifs"? Plongeons plus profondément.

Types actifs: transitions de couture

Le défi: Une animation transversale universelle est utile, mais nous avons souvent besoin de personnalisation de la transition basée sur le contexte de navigation. Par exemple, le contenu paginé peut glisser à droite / gauche, tandis qu'un clic de profil de médias sociaux pourrait persister l'image de profil pendant la transition. La définition de plusieurs transitions conduit directement à des conflits. Nous avons besoin d'une activation de transition sélective.

La solution: Les types actifs déterminent quelle transition s'exécute et quels éléments participent. Dans CSS, le :active-view-transition-type() pseudo-classe cible les éléments avec un type actif spécifique. Si nous définissons bounce comme le type actif, l'animation bounce est activée uniquement lorsque la condition :active-view-transition-type(bounce) est remplie.

@view-transition {
  navigation: auto;
}

Cela empêche les transitions contradictoires. Surtout, cela n'affecte que les transitions vers la page, pas les transitions loin de celle-ci, permettant des transitions personnalisées basées sur la page de destination.

Une démo présentant des transitions bounce et slide, contrôlées via le descripteur types, est disponible ici . Le code complet est sur github [link-to-github].

Le rôle amélioré de JavaScript

CSS seul limite le contrôle aux transitions en fonction de la page de destination. Des scénarios plus complexes, comme nos exemples de pagination et de médias sociaux, nécessitent de connaître la page source. Les types actifs peuvent être remplis de trois manières:

1. via startViewTransition(callbackOptions) arguments.
2. muté dynamiquement à l'aide de la propriété types de la transition.
3. déclaré en utilisant le descripteur types (comme discuté ci-dessus).

L'option 2, en utilisant l'événement pagereveal, permet le paramètre de type actif à la demande, permettant des transitions contextuelles basées sur les pages source et de destination. Une exploration plus approfondie de cette méthode est justifiée.

Pour les plongées plus profondes dans les types actifs et afficher les transitions, voir:

• Afficher les types de transition dans les transitions de vue transversale (Bramus)
• Personnalisez la direction d'une transition de vue avec JavaScript (Umar Hansa)

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!