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

Una Kravets

Joey Arhar

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

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

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

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

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

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

.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. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. 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;
}

/*  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);
}

अब आपके पास इन TODO सूची आइटम की प्रविष्टि और निकास दोनों स्थिति हैं:

एलिमेंट को टॉप-लेयर में ऐनिमेट करना

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

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

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

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

/*   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 pseudo class का इस्तेमाल करें.

.settings-popover {
  &:popover-open {
    /*  0. 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;
    }
    
    /*  1. IS-OPEN STATE  */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;
  }
  
  /*  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 लागू नहीं किया जा रहा है, तो ट्रांज़िशन शुरू होने से पहले, यह सबसे ऊपर की लेयर से बाहर जाएगा और दूसरे पॉपओवर के पीछे जाएगा. यह बहुत आसान इफ़ेक्ट नहीं है.

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

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

इस पहले डेमो में, @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 जोड़ना याद रखना होगा.

नतीजा

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

• पेश है पॉपओवर एपीआई
• css-transitions-2 की खास बातें
• css-position-4 की खास जानकारी