# How to apply a transition when opening/closing a screen

> Configure a transition (slide, fade, scale) on the WindowStyle before show()/hide() — CrossFly animates the screen change automatically.

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

# How to apply a transition when opening/closing a screen

**Purpose.** Unlike value animations (which you drive yourself), a **screen transition** is applied by the framework when pushing/popping a `Window`. Just configure it on the `WindowStyle` **before** `show()`; `hide()` runs the **reverse** transition automatically.

## APIs used
- `WindowStyle.transition(UIConstants.Transition t)` — sets the effect (default duration 0.5s).
- `WindowStyle.transition(Transition t, float durationSeconds)` — effect + duration together.
- `WindowStyle.transitionDuration(float d)` — duration only.
- `WindowStyle.transition` (field) — default `Transition.NONE` (no animation).
- `UIConstants.Transition` — enum: `NONE, FADE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN, SCALE, SCALE_DOWN`. When hiding, the framework uses `t.reverse()` (e.g., `SLIDE_LEFT` → `SLIDE_RIGHT`, `SCALE` → `SCALE_DOWN`).
- `Window.getStyle()` — returns the `ComponentStyle`; for a `Window` it is a `WindowStyle`.

## Full example (copy, paste and run)
```java
package com.exemplo;

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

/** Runnable main screen: opens OutraTela with a SLIDE_LEFT transition. */
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()));  // slides in from the right
   }
}

/** Stacked screen: sets up the transition in the constructor; hide() runs the reverse (SLIDE_RIGHT). */
class OutraTela extends Window
{
   public OutraTela()
   {
      // set the transition on the style BEFORE showing
      ((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() runs SLIDE_RIGHT (reverse) automatically
   }
}
```

> The snippet below shows **only the core**. To run it, place it inside the `MainWindow` skeleton above.

## Minimal snippet
```java
// verified in the source: Window._show() fires ScreenTransition.begin(ws.transition, ws.transitionDuration)
//                       Window.hide() fires the reverse transition (ws.transition.reverse())
public class DetalheTela extends Window
{
   public DetalheTela()
   {
      // set the transition on the style BEFORE showing
      ((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() runs SLIDE_RIGHT (reverse) automatically
   }
}

// open with the transition:
new DetalheTela().show();     // slides from right to left
```

Notes:

- The transition is read in `_show()`/`hide()` from the `WindowStyle`. Configure it in the **constructor** or at any point before `show()` — changing it after the screen is already shown does not re-animate the entrance.
- **Do not** call `hide()` with a different transition expecting to control the exit: the exit is always the **reverse** of what was configured (`transition.reverse()`).
- `Picker` already uses `FADE` by default (it is forced in `Picker._show()` if set to `NONE`) — you rarely need to configure a transition on pickers.
- These transitions animate the **screen change** (the whole `Window`). To animate an individual component within the screen, use value animations ([Fade](/docs/cookbook/anim/fade), [Move](/docs/cookbook/anim/mover-componente), [Pulse](/docs/cookbook/anim/pulso-loop)).

## Dig deeper
- [Screen transitions](/docs/ui/animations/screen-transitions)
- Sibling recipe: [Fade a component](/docs/cookbook/anim/fade)
- Related: [Open and close a screen](/docs/cookbook/nav/abrir-tela)