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

Una Kravets
Joey Arhar
Joey Arhar
X GitHub

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

इन अंतरों को पूरा करने के लिए, 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 से, keyframe rules में 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 प्रॉपर्टी

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

  • normal: ट्रांज़िशन, अलग-अलग प्रॉपर्टी के लिए शुरू नहीं किए जाएंगे. ये सिर्फ़ इंटरपोल की जा सकने वाली प्रॉपर्टी के लिए शुरू किए जाएंगे.
  • allow-discrete: अलग-अलग प्रॉपर्टी के साथ-साथ, इंटरपोल की जा सकने वाली प्रॉपर्टी के लिए भी ट्रांज़िशन शुरू हो जाएंगे.

किसी खास प्रॉपर्टी के लिए allow-discrete मोड चालू करने के लिए, उसे transition शॉर्टहैंड में शामिल करें:

.card {
  transition: opacity 0.25s, display 0.25s allow-discrete; /* Enable allow-discrete for the display property */
}

.card.fade-out {
  opacity: 0;
  display: none;
}
देखें
ध्यान दें: ट्रांज़िशन के इस डेमो में, पहले ऐनिमेशन डेमो से अलग तकनीक दिखाई गई है. हालांकि, यह विज़ुअल तौर पर पहले डेमो से मिलता-जुलता है.

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

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

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

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

एंट्री ऐनिमेशन के लिए @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 लागू नहीं किया जा रहा है, तो ट्रांज़िशन शुरू करने से पहले, वह सबसे ऊपर की लेयर से बाहर निकलकर, दूसरे पॉपओवर के पीछे जाकर रुकेगा. यह बहुत अच्छा इफ़ेक्ट नहीं है.

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

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

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

देखें

नतीजा

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