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)

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

// 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, Move, Pulse).

Dig deeper

• Screen transitions
• Sibling recipe: Fade a component
• Related: Open and close a screen