Cómo aplicar una transición al abrir/cerrar una pantalla

Propósito. A diferencia de las animaciones de valor (que tú mismo diriges), una transición de pantalla es aplicada por el framework al apilar/desapilar una Window. Basta con configurarla en el WindowStyle antes de show(); el hide() ejecuta la transición inversa automáticamente.

APIs usadas

• WindowStyle.transition(UIConstants.Transition t) — define el efecto (duración por defecto 0.5s).
• WindowStyle.transition(Transition t, float durationSeconds) — efecto + duración juntos.
• WindowStyle.transitionDuration(float d) — solo la duración.
• WindowStyle.transition (campo) — por defecto Transition.NONE (sin animación).
• UIConstants.Transition — enum: NONE, FADE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN, SCALE, SCALE_DOWN. Al ocultar, el framework usa t.reverse() (ej.: SLIDE_LEFT → SLIDE_RIGHT, SCALE → SCALE_DOWN).
• Window.getStyle() — retorna el ComponentStyle; para una Window es un WindowStyle.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.animation.*;

/** Pantalla principal ejecutable: abre OutraTela con una transición SLIDE_LEFT. */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      add(new Label("Tela inicial"));
      add(new Button("Abrir detalhe").onAction(e -> new OutraTela().show()));  // desliza desde la derecha
   }
}

/** Pantalla apilada: configura la transición en el constructor; hide() corre el reverso (SLIDE_RIGHT). */
class OutraTela extends Window
{
   public OutraTela()
   {
      // configura la transición en el style ANTES de mostrar
      ((WindowStyle) getStyle()).transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);
   }

   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());
      add(new Label("Detalhe"));
      add(new Button("Voltar").onAction(e -> hide()));  // hide() corre SLIDE_RIGHT (reverso) automáticamente
   }
}

El fragmento de abajo muestra solo el núcleo. Para ejecutarlo, colócalo en el esqueleto MainWindow de arriba.

Fragmento mínimo

// verificado en la fuente: Window._show() dispara ScreenTransition.begin(ws.transition, ws.transitionDuration)
//                       Window.hide() dispara la transición inversa (ws.transition.reverse())
public class DetalheTela extends Window
{
   public DetalheTela()
   {
      // configura la transición en el style ANTES de mostrar
      ((WindowStyle) getStyle()).transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);
   }

   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new GridLayout());
      add(new Label("Detalhe"));
      add(new Button("Voltar").onAction(e -> hide()));  // hide() corre SLIDE_RIGHT (reverso) automáticamente
   }
}

// abrir con la transición:
new DetalheTela().show();     // desliza de la derecha a la izquierda

Notas:

• La transición se lee en _show()/hide() a partir del WindowStyle. Configúrala en el constructor o en cualquier punto antes de show() — cambiarla después de mostrada no reanima la entrada.
• No llames a hide() con una transición diferente esperando controlar la salida: la salida es siempre el inverso de lo que estaba configurado (transition.reverse()).
• Picker ya usa FADE por defecto (se fuerza en Picker._show() si está en NONE) — raramente necesitas configurar transición en pickers.
• Estas transiciones animan el cambio entre pantallas (la Window entera). Para animar un componente aislado dentro de la pantalla, usa las animaciones de valor (Fade, Mover, Pulso).

Profundiza

• Transiciones de pantalla
• Receta hermana: Fade de un componente
• Relacionado: Abrir y cerrar una pantalla