Como aplicar uma transição ao abrir/fechar uma tela

Propósito. Diferente das animações de valor (que você mesmo dirige), uma transição de tela é aplicada pelo framework ao empilhar/desempilhar uma Window. Basta configurá-la no WindowStyle antes de show(); o hide() roda a transição reversa automaticamente.

APIs usadas

• WindowStyle.transition(UIConstants.Transition t) — define o efeito (duração default 0.5s).
• WindowStyle.transition(Transition t, float durationSeconds) — efeito + duração juntos.
• WindowStyle.transitionDuration(float d) — só a duração.
• WindowStyle.transition (campo) — default Transition.NONE (sem animação).
• UIConstants.Transition — enum: NONE, FADE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN, SCALE, SCALE_DOWN. Ao ocultar, o framework usa t.reverse() (ex.: SLIDE_LEFT → SLIDE_RIGHT, SCALE → SCALE_DOWN).
• Window.getStyle() — retorna o ComponentStyle; para uma Window é um WindowStyle.

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

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

/** Tela principal executável: abre OutraTela com uma transição 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 da direita
   }
}

/** Tela empilhada: configura a transição no construtor; hide() roda o reverso (SLIDE_RIGHT). */
class OutraTela extends Window
{
   public OutraTela()
   {
      // configure a transição no 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() roda SLIDE_RIGHT (reverso) automaticamente
   }
}

O trecho abaixo mostra só o miolo. Para rodar, coloque-o no esqueleto MainWindow acima.

Trecho mínimo

// verificado na fonte: Window._show() dispara ScreenTransition.begin(ws.transition, ws.transitionDuration)
//                       Window.hide() dispara a transição reversa (ws.transition.reverse())
public class DetalheTela extends Window
{
   public DetalheTela()
   {
      // configure a transição no 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() roda SLIDE_RIGHT (reverso) automaticamente
   }
}

// abrir com a transição:
new DetalheTela().show();     // desliza da direita para a esquerda

Notas:

• A transição é lida em _show()/hide() a partir do WindowStyle. Configure-a no construtor ou em qualquer ponto antes de show() — mudá-la depois de já exibida não reanima a entrada.
• Não chame hide() com uma transição diferente esperando controlar a saída: a saída é sempre o reverso do que estava configurado (transition.reverse()).
• Picker já usa FADE por padrão (é forçado em Picker._show() se estiver em NONE) — você raramente precisa configurar transição em pickers.
• Estas transições animam a troca entre telas (a Window inteira). Para animar um componente isolado dentro da tela, use as animações de valor (Fade, Mover, Pulso).

Aprofunde-se

• Transições de tela
• Receita irmã: Fade de um componente
• Relacionado: Abrir e fechar uma tela