View Transitions

Ouvrir dans ChatGPT

Java API

25.11 Expérimental

Les transitions de vue fournissent des transitions animées lorsque le DOM change, réduisant les chocs visuels et maintenant le contexte spatial pendant la navigation ou les mises à jour de contenu. webforJ s'intègre à l'API de transition de vue du navigateur pour gérer la complexité de la coordination des animations entre les anciens et les nouveaux états.

Afficher le code

ViewTransitionChatView.java

chat.css

Fonctionnalité expérimentale

Cette fonctionnalité est expérimentale et peut changer ou être supprimée dans une future version.

Utilisation de base

Pour créer une transition de vue, utilisez Page.getCurrent().startViewTransition(), qui renvoie un constructeur pour configurer la transition :

Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    container.remove(oldView);
    container.add(newView);
    done.run();
  })
  .start();

Le processus de transition capture un instantané de l'état actuel, applique vos modifications de DOM dans le rappel onUpdate, puis anime de l'ancien instantané vers le nouveau contenu. Vous devez appeler done.run() pour signaler quand vos changements sont complets.

Le rappel onUpdate est requis

Appeler start() sans définir de rappel de mise à jour lance une IllegalStateException.

Application des transitions

webforJ fournit des types de transition prédéfinis que vous pouvez appliquer aux composants entrant ou sortant du DOM :

Constante	Effet
ViewTransition.NONE	Pas d'animation
ViewTransition.FADE	Fondu entre l'ancien et le nouveau contenu
ViewTransition.SLIDE_LEFT	Le contenu glisse à gauche (comme pour une navigation en avant)
ViewTransition.SLIDE_RIGHT	Le contenu glisse à droite (comme pour une navigation en arrière)
ViewTransition.SLIDE_UP	Le contenu glisse vers le haut
ViewTransition.SLIDE_DOWN	Le contenu glisse vers le bas
ViewTransition.ZOOM	L'ancien contenu se rétracte, le nouveau contenu s'agrandit
ViewTransition.ZOOM_OUT	L'ancien contenu s'agrandit, le nouveau contenu se rétracte

Utilisez enter() pour animer un composant ajouté et exit() pour animer un composant supprimé :

// Animer un composant entrant dans le DOM
Page.getCurrent().startViewTransition()
  .enter(chatPanel, ViewTransition.ZOOM)
  .onUpdate(done -> {
    container.add(chatPanel);
    done.run();
  })
  .start();

// Animer un composant sortant du DOM
Page.getCurrent().startViewTransition()
  .exit(chatPanel, ViewTransition.FADE)
  .onUpdate(done -> {
    container.remove(chatPanel);
    done.run();
  })
  .start();

Transitions de composants partagés

Les transitions de composants partagés créent un effet de morphing où un composant semble se transformer de sa position dans l'ancienne vue à sa position dans la nouvelle vue. Cela est accompli en donnant aux composants le même nom de transition à l'aide de la méthode setViewTransitionName(), disponible sur tout composant qui implémente l'interface HasStyle.

// Dans la vue de carte
image.setViewTransitionName("blog-image");

// Dans la vue de détail - le même nom crée le morph
image.setViewTransitionName("blog-image");

Lors de la transition entre ces vues, le navigateur anime le composant entre les positions, créant une expérience visuelle connectée.

Utilisez des noms uniques

Lorsque vous travaillez avec des listes ou des composants répétitifs, incluez un identifiant unique dans le nom de transition. Chaque composant nécessite son propre nom distinct pour se mouvoir correctement vers son composant correspondant dans la nouvelle vue. Utiliser le même nom pour plusieurs composants visibles entraîne un comportement indéfini.

Afficher le code

ViewTransitionMorphView.java

BlogCard.java

BlogDetail.java

morph.css

Réordonnancement de liste

Un cas d'utilisation courant des transitions de composants partagés est l'animation des éléments de liste lorsque leur ordre change. En attribuant un view-transition-name unique à chaque élément, le navigateur anime automatiquement les composants vers leurs nouvelles positions :

// Chaque carte obtient un nom de transition unique basé sur son ID
card.setViewTransitionName("card-" + item.id());

// Lors du mélange, il suffit de mettre à jour le DOM - le navigateur gère l'animation
Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    renderList();
    done.run();
  })
  .start();

Afficher le code

ViewTransitionShuffleView.java

ShuffleCard.java

shuffle.css

Animations CSS personnalisées

Pour un contrôle total sur les animations, vous pouvez définir des images clés CSS personnalisées. webforJ ajoute les suffixes -enter ou -exit à vos noms de transition, que vous utilisez pour cibler les pseudo-éléments de transition de vue :

/* Définir des images clés pour les composants entrant */
@keyframes flip-enter {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
  }
}

/* Appliquer au pseudo-élément de transition de vue */
::view-transition-new(flip-in-enter) {
  animation: flip-enter 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}

::view-transition-old(flip-in-enter) {
  display: none;
}

Référencez votre animation personnalisée en passant son nom (sans le suffixe) à enter() ou exit() :

// Utilisez "flip-in" - webforJ ajoute automatiquement le suffixe "-enter"
Page.getCurrent().startViewTransition()
  .enter(notification, "flip-in")
  .onUpdate(done -> {
    stage.add(notification);
    done.run();
  })
  .start();

// Utilisez "blur-out" pour la sortie - webforJ ajoute le suffixe "-exit"
Page.getCurrent().startViewTransition()
  .exit(notification, "blur-out")
  .onUpdate(done -> {
    stage.remove(notification);
    done.run();
  })
  .start();

Afficher le code

ViewTransitionEnterExitView.java

enterexit.css

Personnalisation CSS

Chaque type de transition prédéfini expose des propriétés CSS personnalisées pour un affinement :

Fondu

Variable	Par défaut	Description
--vt-fade-duration	200ms	Durée de l'animation
--vt-fade-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement

Glisser à gauche

Variable	Par défaut	Description
--vt-slide-left-duration	200ms	Durée de l'animation
--vt-slide-left-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement
--vt-slide-left-distance	30%	Distance de glisse

Glisser à droite

Variable	Par défaut	Description
--vt-slide-right-duration	200ms	Durée de l'animation
--vt-slide-right-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement
--vt-slide-right-distance	30%	Distance de glisse

Glisser vers le haut

Variable	Par défaut	Description
--vt-slide-up-duration	200ms	Durée de l'animation
--vt-slide-up-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement
--vt-slide-up-distance	30%	Distance de glisse

Glisser vers le bas

Variable	Par défaut	Description
--vt-slide-down-duration	200ms	Durée de l'animation
--vt-slide-down-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement
--vt-slide-down-distance	30%	Distance de glisse

Zoom

Variable	Par défaut	Description
--vt-zoom-duration	200ms	Durée de l'animation
--vt-zoom-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement
--vt-zoom-scale	0.8	Facteur d'échelle (l'ancien se rétracte à cela, le nouveau s'agrandit à partir de cela)

Zoom arrière

Variable	Par défaut	Description
--vt-zoom-out-duration	200ms	Durée de l'animation
--vt-zoom-out-easing	cubic-bezier(0.4, 0, 0.2, 1)	Fonction d'assouplissement
--vt-zoom-out-scale	1.2	Facteur d'échelle (l'ancien s'agrandit à partir de cela, le nouveau se rétracte à partir de cela)

Remplacer les variables

Pour personnaliser, remplacez ces variables dans votre CSS :

:root {
  --vt-fade-duration: 300ms;
  --vt-slide-left-distance: 50%;
}

Pour une personnalisation avancée, ciblez directement les pseudo-éléments de transition de vue :

::view-transition-old(vt-slide-left-exit) {
  animation-duration: 400ms;
}

::view-transition-new(vt-slide-left-enter) {
  animation-timing-function: ease-out;
}