मोशन, किसी भी डिजिटल अनुभव का मुख्य हिस्सा होता है. यह आपके उपयोगकर्ता को एक इंटरैक्शन से दूसरे इंटरैक्शन पर ले जाता है. हालांकि, वेब प्लैटफ़ॉर्म पर ऐनिमेशन में कुछ गड़बड़ियां हैं. इनमें, आसानी से एंट्री और बाहर निकलने के ऐनिमेशन जोड़ने की सुविधा शामिल है. साथ ही, डायलॉग और पॉपओवर जैसे खारिज किए जा सकने वाले एलिमेंट के लिए, टॉप लेयर में और उससे बाहर जाने के लिए आसानी से ऐनिमेशन जोड़ने की सुविधा भी शामिल है.
इन अंतरों को पूरा करने के लिए, Chrome 116 और 117 में वेब प्लैटफ़ॉर्म की चार नई सुविधाएं शामिल की गई हैं. इनकी मदद से, अलग-अलग प्रॉपर्टी के लिए ऐनिमेशन और ट्रांज़िशन आसानी से लागू किए जा सकते हैं.
इन चार नई सुविधाओं में ये शामिल हैं:
displayऔरcontent-visibilityको कीफ़्रेम टाइमलाइन पर ऐनिमेट करने की सुविधा (Chrome 116 से).allow-discreteकीवर्ड वालीtransition-behaviorप्रॉपर्टी, ताकिdisplay(Chrome 117 से) जैसी अलग-अलग प्रॉपर्टी के ट्रांज़िशन चालू किए जा सकें.@starting-styleसे एंट्री इफ़ेक्ट को ऐनिमेट करके, टॉप लेयर में ले जाने के लिए@starting-styleनियम (Chrome 117 से).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 pseudo क्लास का इस्तेमाल करें.
.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 जोड़ना याद रखना होगा.
नतीजा
प्लैटफ़ॉर्म की इन नई सुविधाओं की मदद से, हम वेब प्लैटफ़ॉर्म पर ऐनिमेशन को आसानी से दिखा पाएंगे. ज़्यादा जानने के लिए, ये लिंक देखें: