Route Transitions

Ouvrir dans ChatGPT

Java API

25.11 Experimental

Les transitions de route fournissent des transitions animées déclaratives lors de la navigation entre les routes. Basé sur l'API View Transitions, l'ajout de l'annotation @RouteTransition à vos composants de route permet au routeur de gérer automatiquement le cycle de vie de l'animation pendant la navigation.

API Expérimentale

Cette API est marquée comme expérimentale depuis 25.11 et peut changer dans les futures versions. La signature de l'API, le comportement et les caractéristiques de performance sont susceptibles de modification.

Contrôle programmatique

Pour des scénarios de transition plus complexes ou un contrôle programmatique, utilisez directement l'API View Transitions.

L'annotation @RouteTransition

L'annotation @RouteTransition définit comment un composant de route anime son entrée ou sa sortie de la vue :

@Route
@RouteTransition(enter = ViewTransition.ZOOM, exit = ViewTransition.FADE)
public class DashboardView extends Composite<Div> {
  // implémentation de la vue
}

L'annotation accepte les propriétés suivantes :

Propriété	Description
enter	Animation appliquée lorsque cette vue apparaît
exit	Animation appliquée lorsque cette vue disparaît

Les deux propriétés acceptent n'importe quel type de transition prédéfini ou une valeur de chaîne personnalisée :

Constante	Effet
ViewTransition.NONE	Aucune animation
ViewTransition.FADE	Fondu entre l'ancien et le nouveau contenu
ViewTransition.SLIDE_LEFT	Le contenu glisse à gauche (comme une navigation avant)
ViewTransition.SLIDE_RIGHT	Le contenu glisse à droite (comme une navigation 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étrécit, le nouveau contenu grandit
ViewTransition.ZOOM_OUT	L'ancien contenu grandit, le nouveau contenu se rétrécit

Utilisation basique

Ajoutez l'annotation à n'importe quel composant de route pour activer les transitions :

InboxView.java

@Route(value = "inbox", outlet = MainLayout.class)
@RouteTransition(enter = ViewTransition.ZOOM, exit = ViewTransition.SLIDE_RIGHT)
@FrameTitle("Inbox")
public class InboxView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public InboxView() {
    self.add(new H1("Inbox"));
    // ...
  }
}

Dans cet exemple :

• Lors de la navigation vers InboxView, le composant entre avec une animation de zoom
• Lors de la navigation en dehors de InboxView, le composant sort avec le contenu glissant vers la droite

Flux de navigation

Lors de la navigation entre deux routes, le routeur coordonne la séquence de transition :

1. L'animation exit du composant sortant commence
2. Les changements DOM se produisent (ancienne vue supprimée, nouvelle vue ajoutée)
3. L'animation enter du composant entrant se joue

Si vous naviguez vers la même vue qui est déjà affichée, la transition est ignorée pour éviter des animations inutiles.

Animations de sortie cohérentes

Utiliser la même animation de sortie à travers toutes les vues crée une cohérence directionnelle. Par exemple, configurer toutes les vues pour sortir avec SLIDE_RIGHT établit un motif de mouvement "retour" uniforme, rendant le comportement de navigation prévisible, peu importe la vue d'origine.

Héritage des transitions

Les routes héritent des transitions de leurs routes parentes. Lorsqu'une route n'a pas @RouteTransition, le routeur remonte la hiérarchie pour en trouver une.

@Route
@RouteTransition(enter = ViewTransition.ZOOM)
public class MainLayout extends Composite<AppLayout> {
  // Mise en page parente avec transition
}

@Route(value = "/inbox", outlet = MainLayout.class)
public class InboxView extends Composite<FlexLayout> {
  // Hérite du ZOOM de MainLayout
}

@Route(value = "/sub", outlet = InboxView.class)
public class SubView extends Composite<FlexLayout> {
  // Hérite du ZOOM de MainLayout (via InboxView)
}

Toutes les routes enfants héritent du même style d'animation sans répéter l'annotation.

Remplacement des transitions héritées

Les routes enfants peuvent remplacer la transition héritée en définissant leur propre @RouteTransition :

@Route
@RouteTransition(enter = ViewTransition.ZOOM)
public class MainLayout extends Composite<AppLayout> {}

@Route(value = "/inbox", outlet = MainLayout.class)
public class InboxView extends Composite<FlexLayout> {
  // Hérite du ZOOM
}

@Route(value = "/settings", outlet = MainLayout.class)
@RouteTransition(enter = ViewTransition.SLIDE_UP, exit = ViewTransition.SLIDE_DOWN)
public class SettingsView extends Composite<FlexLayout> {
  // Remplace avec SLIDE_UP/SLIDE_DOWN
}

Transitions de composants partagés

Vous pouvez combiner les transitions de route avec des animations de composants partagés pour créer des expériences connectées. Les composants avec des valeurs view-transition-name correspondantes se transforment entre les vues. Utilisez la méthode setViewTransitionName(), disponible sur tout composant qui implémente l'interface HasStyle.

ProductListView.java

@Route(value = "products", outlet = MainLayout.class)
@RouteTransition(enter = ViewTransition.FADE)
public class ProductListView extends Composite<FlexLayout> {

  private void buildProductCard(Product product) {
      Img thumbnail = new Img(product.getImageUrl());
      thumbnail.setViewTransitionName("product-image-" + product.getId());
      // ...
  }
}

ProductDetailView.java

@Route(value = "products/:id", outlet = MainLayout.class)
@RouteTransition(enter = ViewTransition.FADE)
public class ProductDetailView extends Composite<FlexLayout> implements DidEnterObserver {

  private Img heroImage = new Img();

  @Override
  public void onDidEnter(DidEnterEvent event, ParametersBag parameters) {
      String id = parameters.get("id").orElse("");
      heroImage.setViewTransitionName("product-image-" + id);
      // ...
  }
}

Lors de la navigation de la liste à la vue de détail, la miniature du produit se transforme en position de l'image principale pendant que le reste du contenu transitionne avec l'animation de fondu.