# स्क्रीन खोलते/बंद करते समय ट्रांज़िशन कैसे लागू करें

> show()/hide() से पहले WindowStyle में एक ट्रांज़िशन (slide, fade, scale) कॉन्फ़िगर करें — CrossFly स्क्रीन बदलने को अपने आप एनिमेट करता है।

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

# स्क्रीन खोलते/बंद करते समय ट्रांज़िशन कैसे लागू करें

**उद्देश्य.** वैल्यू एनिमेशन (जिन्हें आप स्वयं नियंत्रित करते हैं) के विपरीत, एक **स्क्रीन ट्रांज़िशन** को फ्रेमवर्क तब लागू करता है जब कोई `Window` स्टैक में जोड़ा/हटाया जाता है। बस इसे `show()` से **पहले** `WindowStyle` में कॉन्फ़िगर करें; `hide()` अपने आप **उल्टा** ट्रांज़िशन चलाता है।

## उपयोग किए गए APIs
- `WindowStyle.transition(UIConstants.Transition t)` — इफ़ेक्ट परिभाषित करता है (डिफ़ॉल्ट अवधि 0.5s)।
- `WindowStyle.transition(Transition t, float durationSeconds)` — इफ़ेक्ट + अवधि एक साथ।
- `WindowStyle.transitionDuration(float d)` — केवल अवधि।
- `WindowStyle.transition` (फ़ील्ड) — डिफ़ॉल्ट `Transition.NONE` (कोई एनिमेशन नहीं)।
- `UIConstants.Transition` — enum: `NONE, FADE, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN, SCALE, SCALE_DOWN`। छिपाते समय, फ्रेमवर्क `t.reverse()` का उपयोग करता है (जैसे: `SLIDE_LEFT` → `SLIDE_RIGHT`, `SCALE` → `SCALE_DOWN`)।
- `Window.getStyle()` — `ComponentStyle` लौटाता है; किसी `Window` के लिए यह एक `WindowStyle` होता है।

## पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

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

/** चलाने योग्य मुख्य स्क्रीन: OutraTela को 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()));  // दाईं ओर से सरकता है
   }
}

/** स्टैक की गई स्क्रीन: constructor में ट्रांज़िशन कॉन्फ़िगर करती है; hide() उल्टा (SLIDE_RIGHT) चलाता है। */
class OutraTela extends Window
{
   public OutraTela()
   {
      // दिखाने से पहले style में ट्रांज़िशन कॉन्फ़िगर करें
      ((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() स्वतः SLIDE_RIGHT (उल्टा) चलाता है
   }
}
```

> नीचे दिया गया अंश **केवल मुख्य भाग** दिखाता है। इसे चलाने के लिए, इसे ऊपर दिए गए `MainWindow` कंकाल में रखें।

## न्यूनतम अंश
```java
// स्रोत में सत्यापित: Window._show() ScreenTransition.begin(ws.transition, ws.transitionDuration) को ट्रिगर करता है
//                       Window.hide() उल्टा ट्रांज़िशन (ws.transition.reverse()) ट्रिगर करता है
public class DetalheTela extends Window
{
   public DetalheTela()
   {
      // दिखाने से पहले style में ट्रांज़िशन कॉन्फ़िगर करें
      ((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() स्वतः SLIDE_RIGHT (उल्टा) चलाता है
   }
}

// ट्रांज़िशन के साथ खोलें:
new DetalheTela().show();     // दाईं ओर से बाईं ओर सरकता है
```

नोट्स:

- ट्रांज़िशन को `_show()`/`hide()` में `WindowStyle` से पढ़ा जाता है। इसे **कंस्ट्रक्टर** में या `show()` से पहले किसी भी बिंदु पर कॉन्फ़िगर करें — पहले से दिखाए जाने के बाद इसे बदलने से प्रवेश फिर से एनिमेट नहीं होता।
- निकास को नियंत्रित करने की उम्मीद में किसी भिन्न ट्रांज़िशन के साथ `hide()` को **मत** कॉल करें: निकास हमेशा कॉन्फ़िगर किए गए के **उल्टे** (`transition.reverse()`) के रूप में होता है।
- `Picker` डिफ़ॉल्ट रूप से पहले से ही `FADE` का उपयोग करता है (यदि यह `NONE` में हो तो `Picker._show()` में इसे बलपूर्वक लागू किया जाता है) — आपको pickers में शायद ही कभी ट्रांज़िशन कॉन्फ़िगर करने की आवश्यकता होती है।
- ये ट्रांज़िशन **स्क्रीनों के बीच अदला-बदली** (पूरी `Window`) को एनिमेट करते हैं। स्क्रीन के भीतर किसी अलग कंपोनेंट को एनिमेट करने के लिए, वैल्यू एनिमेशन का उपयोग करें ([Fade](/docs/cookbook/anim/fade), [Mover](/docs/cookbook/anim/mover-componente), [Pulso](/docs/cookbook/anim/pulso-loop))।

## और गहराई से जानें
- [स्क्रीन ट्रांज़िशन](/docs/ui/animations/screen-transitions)
- संबंधित रेसिपी: [किसी कंपोनेंट का Fade](/docs/cookbook/anim/fade)
- संबंधित: [स्क्रीन खोलना और बंद करना](/docs/cookbook/nav/abrir-tela)