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

> Configurar uma transição (slide, fade, scale) na WindowStyle antes de show()/hide() — o CrossFly anima a troca de telas automaticamente.

Source: https://crossfly.dev/pt/docs/cookbook/anim/transicao-de-tela — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 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)
```java
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
```java
// 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](/docs/cookbook/anim/fade), [Mover](/docs/cookbook/anim/mover-componente), [Pulso](/docs/cookbook/anim/pulso-loop)).

## Aprofunde-se
- [Transições de tela](/docs/ui/animations/screen-transitions)
- Receita irmã: [Fade de um componente](/docs/cookbook/anim/fade)
- Relacionado: [Abrir e fechar uma tela](/docs/cookbook/nav/abrir-tela)