अब बेसलाइन में: एंट्री इफ़ेक्ट का ऐनिमेशन

Una Kravets

एंट्री और एग्ज़िट इफ़ेक्ट के लिए सीएसएस की चार नई सुविधाओं के बारे में जानकारी दी गई है. इनमें कुछ ऐसी काम की सुविधाओं के बारे में बताया गया है जो Chrome में अभी-अभी उपलब्ध हैं. इनमें से दो सुविधाएं, @starting-style और transition-behavior: allow-discrete हैं, जो Firefox 129 के रिलीज़ होने के बाद बेसलाइन के न्यूली उपलब्ध हो गए हैं. अब एलिमेंट के लिए, एंट्री ऐनिमेशन इफ़ेक्ट बनाए जा सकते हैं. इनमें, display: none से ऐनिमेट होने वाले और सबसे ऊपर की लेयर में ऐनिमेशन वाले इफ़ेक्ट शामिल हैं.

@starting-style के साथ एंट्री इफ़ेक्ट सेट अप किए जा रहे हैं

@starting-style नियम, पेज पर किसी एलिमेंट को रेंडर करने से पहले उसकी शुरुआती स्टाइल तय करता है. यह उन एलिमेंट के लिए ज़रूरी है जो display: none से ऐनिमेट होते हैं, क्योंकि उन्हें ऐसी स्थिति की ज़रूरत होती है जिसमें ऐनिमेट किया जाना हो.

सीएसएस के किसी भी अन्य नियम की तरह ही @starting-style का इस्तेमाल करने के लिए, उसमें एलिमेंट की स्टाइल डालें. उदाहरण के लिए, <dialog> का इस्तेमाल करके, dialog[open] स्टाइल को @starting-style नियम में रखें. इन स्टाइल का इस्तेमाल, डायलॉग खुलने से पहले किया जाता है.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

allow-discrete के साथ अलग-अलग ऐनिमेशन चालू किए जा रहे हैं

display: none से ऐनिमेट होने वाले एलिमेंट, जैसे कि डायलॉग और पॉपओवर के लिए, एंट्री ऐनिमेशन को सपोर्ट करने के लिए दूसरी ज़रूरी बात यह है कि अलग-अलग प्रॉपर्टी के ऐनिमेशन के लिए नया ऐनिमेशन मोड चालू किया जाए. डिस्क्रीट प्रॉपर्टी ऐसी प्रॉपर्टी होती हैं जो वैल्यू के बीच इंटरपोलेट नहीं की जा सकतीं. इन्हें चालू/बंद स्विच की तरह समझा जा सकता है. कुछ उदाहरणों में display, visibility, mix-blend-mode—ऐसी प्रॉपर्टी शामिल हैं जिसमें सुविधा की कोई वैल्यू या कोई दूसरी वैल्यू हो. इस नए ऐनिमेशन मोड के साथ, ब्राउज़र अब ट्रांज़िशन के 0% पॉइंट के बजाय, 50% पॉइंट पर वैल्यू बदलने की सुविधा देता है.

display: none और visibility: hidden एलिमेंट के लिए, एंट्री इफ़ेक्ट को ऐनिमेट करने के लिए, इनमें से किसी एक तरीके का इस्तेमाल करें:

• allow-discrete वैल्यू वाली स्टैंडअलोन प्रॉपर्टी transition-behavior.
• आपके ट्रांज़िशन शॉर्टहैंड में allow-discrete की वैल्यू.

हम दूसरे तरीके का सुझाव देते हैं, क्योंकि transition-behavior लागू करने की प्रक्रिया transition शॉर्टहैंड में शामिल है. अगर आपने ट्रांज़िशन, समय, और ईज़िंग फ़ंक्शन को लागू करने के दौरान, ट्रांज़िशन शॉर्टहैंड की मदद से transition-behavior: allow-discrete को पहले लागू किया है, तो ब्राउज़र transition-behavior को अनदेखा कर देगा.

अगर शॉर्टहैंड में इसका इस्तेमाल किया जा रहा है, तो आपको सिर्फ़ उन प्रॉपर्टी में allow-discrete कीवर्ड लागू करना होगा जिनके लिए अलग-अलग ऐनिमेशन की ज़रूरत होती है. इसे नीचे दिए गए सीएसएस में दिखाया गया है, जो translate प्रॉपर्टी और display प्रॉपर्टी, दोनों का ट्रांज़िशन करती है. हालांकि, यह display प्रॉपर्टी में सिर्फ़ allow-discrete कीवर्ड लागू करती है.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

डेमो: जानकारी को एक जगह इकट्ठा करना

इन सुविधाओं का इस्तेमाल करना, खास तौर पर टॉप-लेयर एलिमेंट के लिए मददगार होता है. जैसे, <dialog> एलिमेंट या popover एट्रिब्यूट का इस्तेमाल करने वाले कॉम्पोनेंट. यहां दिए गए उदाहरण में, <dialog> एलिमेंट को व्यूपोर्ट के नीचे से (शुरू में 100vh वर्टिकल ट्रांसलेशन की ऑफ़-स्क्रीन से शुरू होकर) व्यूपोर्ट के बीच में ऐनिमेशन किया गया है, <dialog> के खुले होने पर अनुवाद को हटा दिया गया है.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

सीएसएस नेस्टिंग की मदद से, इसे कम शब्दों में लिखा जा सकता है. यह बेसलाइन की नई उपलब्ध सुविधा भी है.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

नतीजा

बेसलाइन में इस तरह की प्रोग्रेस को देखना बहुत अच्छा लगता है. कम से कम यह देखकर, इन एलिमेंट में तेज़ी से सुधार आता है. इन एंट्री इफ़ेक्ट सुविधाओं के बिना, सबसे ऊपर की लेयर में या किसी display: none स्टाइल से ऐनिमेट होने वाले एलिमेंट, ट्रांज़िशन के बिना ही आपके पेज पर दिखेंगे. ठीक वैसे ही जैसे आज होते हैं.

एग्ज़िट इफ़ेक्ट को बेहतर तरीके से जोड़ने का तरीका जानने के लिए, “आसान एंट्री और एग्ज़िट ऐनिमेशन के लिए सीएसएस की चार नई सुविधाएं” लेख देखें. साथ ही, इन सुविधाओं के बारे में ज़्यादा जानने के लिए, दस्तावेज़ के इन संसाधनों को देखें:

• एमडीएन पर@starting-style
• एमडीएन पर ट्रांज़िशन-व्यवहार