आसानी से एंट्री करने और बाहर निकलने के ऐनिमेशन के लिए चार नई सीएसएस सुविधाएं

Una Kravets

Joey Arhar

मोशन, किसी भी डिजिटल अनुभव का मुख्य हिस्सा होता है. यह आपके उपयोगकर्ता को एक इंटरैक्शन से दूसरे इंटरैक्शन पर ले जाता है. हालांकि, वेब प्लैटफ़ॉर्म पर ऐनिमेशन में कुछ गड़बड़ियां हैं. इनमें, आसानी से एंट्री और बाहर निकलने के ऐनिमेशन जोड़ने की सुविधा शामिल है. साथ ही, डायलॉग और पॉपओवर जैसे खारिज किए जा सकने वाले एलिमेंट के लिए, टॉप लेयर में और उससे बाहर जाने के लिए आसानी से ऐनिमेशन जोड़ने की सुविधा भी शामिल है.

इन अंतरों को पूरा करने के लिए, Chrome 116 और 117 में वेब प्लैटफ़ॉर्म की चार नई सुविधाएं शामिल की गई हैं. इनकी मदद से, अलग-अलग प्रॉपर्टी के लिए ऐनिमेशन और ट्रांज़िशन आसानी से लागू किए जा सकते हैं.

इन चार नई सुविधाओं में ये शामिल हैं:

• display और content-visibility को कीफ़्रेम टाइमलाइन पर ऐनिमेट करने की सुविधा (Chrome 116 से).
• allow-discrete कीवर्ड वाली transition-behavior प्रॉपर्टी, ताकि display (Chrome 117 से) जैसी अलग-अलग प्रॉपर्टी के ट्रांज़िशन चालू किए जा सकें.
• @starting-style से एंट्री इफ़ेक्ट को ऐनिमेट करके, टॉप लेयर में ले जाने के लिए @starting-style नियम (Chrome 117 से).display: none
• overlay प्रॉपर्टी, ऐनिमेशन के दौरान टॉप लेयर के व्यवहार को कंट्रोल करती है. यह प्रॉपर्टी, Chrome 117 से उपलब्ध है.

कीफ़्रेम में ऐनिमेशन दिखाना

Chrome 116 से, फ़्रेम के नियमों में display और content-visibility का इस्तेमाल किया जा सकता है. इसके बाद, ये keyframe होने पर स्विच हो जाएंगे. इसके लिए, कोई नई वैल्यू सबमिट करने की ज़रूरत नहीं है:

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

पिछले उदाहरण में, ओपैसिटी को 0.5 सेकंड में 0 पर ऐनिमेट किया गया है. इसके बाद, डिसप्ले को 'कोई नहीं' पर सेट किया गया है. इसके अलावा, forwards कीवर्ड यह पक्का करता है कि ऐनिमेशन अपनी आखिरी स्थिति में बना रहे, ताकि जिस एलिमेंट पर इसे लागू किया गया है वह display: none और opacity: 0 बना रहे.

यह एक आसान उदाहरण है, जिसमें दिखाया गया है कि ट्रांज़िशन की मदद से क्या-क्या किया जा सकता है. ट्रांज़िशन सेक्शन में डेमो देखें. हालांकि, ट्रांज़िशन की मदद से ज़्यादा जटिल ऐनिमेशन नहीं बनाए जा सकते. जैसे, यह उदाहरण:

.card {
  animation: spin-and-delete 1s ease-in forwards;
}

@keyframes spin-and-delete {
  0% {
    transform: rotateY(0);
    filter: hue-rotate(0);
  }
  80% {
    transform: rotateY(360deg);
    filter: hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

spin-and-delete ऐनिमेशन, ऑब्जेक्ट को हटाने के लिए इस्तेमाल किया जाता है. सबसे पहले, कार्ड y-ऐक्सिस पर घूमेगा और ह्यू-रोटेशन के ज़रिए चलेगा. इसके बाद, 80% पर टाइमलाइन के ज़रिए, उसकी ऑपैसिटी 1 से 0 पर ट्रांज़िशन होगी. आखिर में, कार्ड display: block से display: none पर स्विच हो जाता है.

इन बाहर निकलने वाले ऐनिमेशन को सीधे किसी एलिमेंट पर लागू करने के बजाय, उनके लिए ट्रिगर सेट अप किया जा सकता है. उदाहरण के लिए, किसी बटन से इवेंट लिसनर को अटैच करके, ऐनिमेशन लागू करने के लिए क्लास को ट्रिगर किया जा सकता है. जैसे:

.spin-out {
   animation: spin-and-delete 1s ease-in forwards;
}

document.querySelector('.delete-btn').addEventListener('click', () => {
 document.querySelector('.card').classList.add('spin-out');
})

ऊपर दिए गए उदाहरण में, अब आखिरी स्थिति display:none है. कई मामलों में, आपको टेंप्लेट को थोड़ा और बेहतर बनाना होगा. इसके लिए, ऐनिमेशन पूरा होने से पहले, टेंप्लेट से DOM नोड को हटाने के लिए टाइम आउट का इस्तेमाल करें.

अलग-अलग ऐनिमेशन के बीच ट्रांज़िशन करना

अलग-अलग प्रॉपर्टी को ऐनिमेट करने के लिए, अलग-अलग प्रॉपर्टी को ट्रांज़िशन करने के लिए, आपको allow-discrete ट्रांज़िशन व्यवहार मोड का इस्तेमाल करना होगा.

transition-behavior प्रॉपर्टी

allow-discrete मोड की मदद से, अलग-अलग ट्रांज़िशन बनाए जा सकते हैं. यह transition-behavior प्रॉपर्टी की वैल्यू होती है. transition-behavior में दो वैल्यू इस्तेमाल की जा सकती हैं: normal और allow-discrete.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

transition शॉर्टहैंड भी यह वैल्यू सेट करता है. इसलिए, हर ट्रांज़िशन के लिए प्रॉपर्टी को छोड़ा जा सकता है और transition शॉर्टहैंड के आखिर में allow-discrete कीवर्ड का इस्तेमाल किया जा सकता है.

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

अगर आपको एक से ज़्यादा अलग-अलग प्रॉपर्टी को ऐनिमेट करना है, तो आपको हर उस प्रॉपर्टी के बाद allow-discrete शामिल करना होगा जिसे ऐनिमेट करना है. उदाहरण के लिए:

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

एंट्री ऐनिमेशन के लिए @starting-style नियम

अब तक, इस लेख में बाहर निकलने के ऐनिमेशन के बारे में बताया गया है. एंट्री ऐनिमेशन बनाने के लिए, आपको @starting-style नियम का इस्तेमाल करना होगा.

@starting-style का इस्तेमाल करके, ऐसी स्टाइल लागू करें जिसे ब्राउज़र, पेज पर एलिमेंट खुलने से पहले देख सके. यह “खुलने से पहले” की स्थिति है (जहां से ऐनिमेशन शुरू किया जा रहा है).

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

अब आपके पास, 'क्या-क्या करें' सूची के इन आइटम के लिए, एंट्री और बाहर निकलने की दोनों स्थितियां हैं:

एलिमेंट को टॉप लेयर में और उससे बाहर ऐनिमेट करना

एलिमेंट को टॉप लेयर में और उससे बाहर ऐनिमेट करने के लिए, “खुला” स्टेटस पर @starting-style डालें. इससे ब्राउज़र को पता चलेगा कि एलिमेंट को कहां से ऐनिमेट करना है. किसी डायलॉग के लिए, खुली स्थिति को [open] एट्रिब्यूट से तय किया जाता है. पॉपओवर के लिए, :popover-open सूडो क्लास का इस्तेमाल करें.

डायलॉग का एक आसान उदाहरण कुछ ऐसा दिख सकता है:

/*   0. IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   1. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

/*   2. EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

अगले उदाहरण में, एंट्री और एक्सिट इफ़ेक्ट अलग-अलग हैं. व्यूपोर्ट के सबसे नीचे से ऊपर की ओर ऐनिमेशन के साथ एंटर करें. इसके बाद, व्यूपोर्ट के सबसे ऊपर से बाहर निकलें. इसे नेस्ट की गई सीएसएस के साथ भी लिखा जाता है, ताकि विज़ुअल को ज़्यादा बेहतर तरीके से दिखाया जा सके.

पॉपओवर को ऐनिमेट करते समय, पहले इस्तेमाल किए गए open एट्रिब्यूट के बजाय :popover-open स्यूडो क्लास का इस्तेमाल करें.

.settings-popover {
  &:popover-open {
    /*  0. IS-OPEN STATE  */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;

    /*  1. BEFORE-OPEN STATE  */
    /*  Initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  /*  2. EXIT STATE  */
  /*  Initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateY(-50px);
  opacity: 0;
  
  /*  Enumerate transitioning properties, 
      including display and allow-discrete mode */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

overlay की प्रॉपर्टी

आखिर में, सबसे ऊपर की लेयर से popover या dialog को फ़ेड आउट करने के लिए, ट्रांज़िशन की सूची में overlay प्रॉपर्टी जोड़ें. popover और dialog, पैरंट क्लिप और ट्रांसफ़ॉर्म से बाहर निकलते हैं. साथ ही, कॉन्टेंट को सबसे ऊपर की लेयर में डालते हैं. अगर overlay को ट्रांज़िशन नहीं किया जाता है, तो आपका एलिमेंट तुरंत क्लिप हो जाएगा, बदल जाएगा, और कवर हो जाएगा. साथ ही, आपको ट्रांज़िशन नहीं दिखेगा.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

इसके बजाय, overlay को अन्य सुविधाओं के साथ ऐनिमेट करने के लिए, ट्रांज़िशन या ऐनिमेशन में overlay शामिल करें. साथ ही, पक्का करें कि ऐनिमेशन के दौरान यह टॉप लेयर में बना रहे. इससे वीडियो ज़्यादा बेहतर दिखेगा.

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

इसके अलावा, जब टॉप लेयर में कई एलिमेंट खुले हों, तो ओवरले की मदद से टॉप लेयर में आसानी से ट्रांज़िशन किया जा सकता है. इस आसान उदाहरण में अंतर देखा जा सकता है. अगर दूसरे पॉपओवर को ट्रांज़िशन करते समय उस पर overlay लागू नहीं किया जा रहा है, तो ट्रांज़िशन शुरू करने से पहले, वह सबसे ऊपर की लेयर से बाहर निकलकर दूसरे पॉपओवर के पीछे जाकर रुकेगा. यह बहुत अच्छा इफ़ेक्ट नहीं है.

व्यू ट्रांज़िशन के बारे में जानकारी

अगर DOM में बदलाव किए जा रहे हैं, जैसे कि DOM से एलिमेंट जोड़ना और हटाना, तो ट्रांज़िशन देखें. यह आसानी से चलने वाले ऐनिमेशन के लिए एक और बेहतरीन तरीका है. यहां ऊपर दिए गए दो उदाहरण दिए गए हैं, जिन्हें व्यू ट्रांज़िशन का इस्तेमाल करके बनाया गया है.

इस पहले डेमो में, @starting-style और अन्य सीएसएस ट्रांसफ़ॉर्म सेट अप करने के बजाय, व्यू ट्रांज़िशन ट्रांज़िशन को मैनेज करेंगे. व्यू ट्रांज़िशन को इस तरह सेट अप किया जाता है:

सबसे पहले, सीएसएस में हर कार्ड को एक अलग view-transition-name दें.

.card-1 {
  view-transition-name: card-1;
}

.card-2 {
  view-transition-name: card-2;
}

/* etc. */

इसके बाद, JavaScript में डीओएम म्यूटेशन (इस मामले में, कार्ड को हटाना) को व्यू ट्रांज़िशन में रैप करें.

deleteBtn.addEventListener('click', () => {
  // Check for browser support
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      // DOM mutation
      card.remove();
    });
  } 
  // Alternative if no browser support
  else {
    card.remove();
  }
})

अब ब्राउज़र, हर कार्ड को फ़ेड आउट कर सकता है और उसे नई जगह पर ले जा सकता है.

सूची के आइटम जोड़ने/हटाने के डेमो में भी यह सुविधा काम की हो सकती है. इस मामले में, आपको बनाए गए हर कार्ड के लिए एक यूनीक view-transition-name जोड़ना होगा.

नतीजा

प्लैटफ़ॉर्म की इन नई सुविधाओं की मदद से, हम वेब प्लैटफ़ॉर्म पर ऐनिमेशन को आसानी से दिखा पाएंगे. ज़्यादा जानने के लिए, ये लिंक देखें:

• पेश है popover API
• css-transitions-2 spec
• css-position-4 spec