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 lors de la navigation ou des 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 états ancien et nouveau.

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 DOM dans le rappel onUpdate, puis anime de l'ancien instantané au nouveau contenu. Vous devez appeler done.run() pour signaler que vos modifications sont terminées.

Le rappel onUpdate est requis

Appeler start() sans définir un rappel de mise à jour déclenche 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 ancien et nouveau contenu
ViewTransition.SLIDE_LEFT	Le contenu glisse vers la gauche (comme une navigation vers l'avant)
ViewTransition.SLIDE_RIGHT	Le contenu glisse vers la droite (comme une navigation vers l'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 rétrécit, le nouveau contenu grandit
ViewTransition.ZOOM_OUT	L'ancien contenu grandit, le nouveau contenu rétrécit

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

// 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 réalisé en donnant aux composants le même nom de transition en utilisant la méthode setViewTransitionName(), disponible sur tout composant qui implémente l'interface HasStyle.

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

// Dans la vue des détails - 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étés, incluez un identifiant unique dans le nom de transition. Chaque composant nécessite son propre nom distinct pour se métamorphoser 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 pour les transitions de composants partagés est l'animation des éléments de liste lorsque leur ordre change. En assignant 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 de mélanges, mettez simplement à 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 keyframes CSS personnalisées. webforJ ajoute des suffixes -enter ou -exit à vos noms de transition, que vous utilisez pour cibler les pseudo-éléments de transition de vue :

/* Définir des keyframes 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érez-vous à 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 ajustement fin :

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'easing

Glisser vers la 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'easing
--vt-slide-left-distance	30%	Distance de glissement

Glisser vers la 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'easing
--vt-slide-right-distance	30%	Distance de glissement

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'easing
--vt-slide-up-distance	30%	Distance de glissement

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'easing
--vt-slide-down-distance	30%	Distance de glissement

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'easing
--vt-zoom-scale	0.8	Facteur d'échelle (l'ancien zoom se réduit à cela, le nouveau zoom entre depuis 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'easing
--vt-zoom-out-scale	1.2	Facteur d'échelle (l'ancien zoom se réduit à cela, le nouveau zoom entre depuis cela)

Redéfinition des variables

Pour personnaliser, redéfinissez 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;
}