व्यू ट्रांज़िशन, किसी वेब पेज या ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग स्थितियों के बीच ऐनिमेट किए गए और बिना किसी रुकावट के होने वाले ट्रांज़िशन होते हैं. View Transit API को इस तरह डिज़ाइन किया गया है कि आप इन इफ़ेक्ट को पहले से ज़्यादा आसान और बेहतर तरीके से बना सकें. यह एपीआई, JavaScript के पिछले तरीकों की तुलना में कई फ़ायदे देता है. इनमें ये फ़ायदे शामिल हैं:
- बेहतर उपयोगकर्ता अनुभव: बेहतर ट्रांज़िशन और विज़ुअल निर्देश, यूज़र इंटरफ़ेस (यूआई) में होने वाले बदलावों के बारे में उपयोगकर्ताओं को गाइड करते हैं. इससे, नेविगेशन स्वाभाविक और कम झंझट वाला लगता है.
- विज़ुअल कॉन्टेंट को बनाए रखना: अलग-अलग तरह के व्यू के बीच तालमेल बनाए रखने से, कॉन्टेंट को समझने की क्षमता कम हो जाती है. साथ ही, उपयोगकर्ताओं को ऐप्लिकेशन से जुड़ी चीज़ों को बनाए रखने में मदद मिलती है.
- परफ़ॉर्मेंस: एपीआई, थ्रेड के लिए ज़्यादा से कम रिसॉर्स का इस्तेमाल करने की कोशिश करता है, जिनसे आसान ऐनिमेशन बनाए जा सकते हैं.
- अब शानदार: बेहतर ट्रांज़िशन, उपयोगकर्ता को शानदार और दिलचस्प अनुभव देने में मदद करते हैं.
यह पोस्ट उस सीरीज़ का हिस्सा है जिसमें बताया गया है कि ई-कॉमर्स कंपनियों ने सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं का इस्तेमाल करके अपनी वेबसाइट को कैसे बेहतर बनाया. इस लेख में बताया गया है कि कुछ कंपनियों ने View Transit API को कैसे लागू किया और उनसे कैसे फ़ायदा पाया.
redBus
RedBus ने हमेशा अपने मूल और वेब अनुभवों के बीच ज़्यादा से ज़्यादा समानता लाने की कोशिश की है. व्यू ट्रांज़िशन एपीआई के पहले, हमारी वेब ऐसेट पर इन ऐनिमेशन को लागू करने में काफ़ी मुश्किलों का सामना करना पड़ रहा था. हालांकि, एपीआई की मदद से हमें वेब अनुभव को ऐप्लिकेशन जैसा बनाने के लिए, अलग-अलग उपयोगकर्ताओं के अनुभव को अलग-अलग तरह से समझना आसान लगा. इनके साथ-साथ परफ़ॉर्मेंस से जुड़े फ़ायदे भी हैं. इसलिए, यह सभी वेबसाइटों के लिए एक होना ज़रूरी है.—अमित कुमार, सीनियर इंजीनियरिंग मैनेजर, RedBus.
टीम ने कई जगहों पर व्यू ट्रांज़िशन लागू किए हैं. यहां होम पेज पर लॉगिन आइकॉन पर, फ़ेड इन और स्लाइड इन ऐनिमेशन के कॉम्बिनेशन का एक उदाहरण दिया गया है.
कोड
लागू करने के लिए, कईview-transition-name
और कस्टम ऐनिमेशन (scale-down
और scale-up
) का इस्तेमाल किया गया है. यूनीक वैल्यू के साथ view-transition-name
का इस्तेमाल करने पर, साइन इन कॉम्पोनेंट और उसे अलग से ऐनिमेट करने के लिए, साइन इन कॉम्पोनेंट को पेज के बाकी हिस्सों से अलग किया जाता है. नया यूनीक view-transition-name
बनाने से, स्यूडो-एलिमेंट ट्री में एक नया::view-transition-group
भी बन जाता है (नीचे दिए गए कोड में दिखाया गया है), ताकि इसमें डिफ़ॉल्ट ::view-transition-group(root)
से अलग बदलाव किया जा सके.
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
टोकोपीडिया
उपयोगकर्ता के प्रॉडक्ट थंबनेल के बीच स्विच करने पर, टीम ने फ़ेडिंग ऐनिमेशन जोड़ने के लिए व्यू ट्रांज़िशन का इस्तेमाल किया.
इसे लागू करना बहुत आसान है.
startViewTransition
का इस्तेमाल करने पर, हमें बिना किसी असर के पिछले तरीके की तुलना में तुरंत बेहतर फ़ेडिंग ट्रांज़िशन मिलता है—एंडी विहालिम, सीनियर सॉफ़्टवेयर इंजीनियर, Tokopedia.
पहले
बाद में
कोड
यह कोड, React फ़्रेमवर्क का इस्तेमाल करता है और इसमें फ़्रेमवर्क के हिसाब से बना कोड शामिल होता है, जैसे कि flushSync.
व्यू ट्रांज़िशन लागू करने के लिए फ़्रेमवर्क के साथ काम करने के बारे में ज़्यादा पढ़ें.
यह बुनियादी तौर पर लागू किया जाता है, जो यह जांचता है कि ब्राउज़र पर
startViewTransition
काम करता है या नहीं और अगर है, तो ट्रांज़िशन करता है. नहीं तो, यह डिफ़ॉल्ट
व्यवहार पर वापस चला जाता है.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
नीतिबाज़ार
पॉलिसीबाज़ार के निवेश वर्टिकल में "खरीदें क्यों खरीदें" जैसे सहायता सुझाव एलिमेंट पर व्यू ट्रांज़िशन एपीआई का इस्तेमाल किया गया है. इससे ये दिखने में आकर्षक होते हैं और इस तरह की सुविधाओं के इस्तेमाल को बेहतर बनाया जाता है.
व्यू ट्रांज़िशन को शामिल करके, हमने दोहराए जाने वाले सीएसएस और JavaScript कोड को हटा दिया है. यह कोड अलग-अलग राज्यों में ऐनिमेशन को मैनेज करने के लिए ज़िम्मेदार है. इससे डेवलपमेंट में लगने वाले समय में कमी आई और उपयोगकर्ता अनुभव काफ़ी बेहतर हो गया.—अमन सोनी, टेक लीड, Policybazaar.
कोड
यहां दिया गया कोड, ऊपर दिए गए उदाहरणों जैसा है. इस बात का ध्यान रखें कि ::view-transition-old(root)
और::view-transition-new(root)
की डिफ़ॉल्ट स्टाइल और ऐनिमेशन को बदला जा सकता है. इस मामले में, डिफ़ॉल्ट animation-duration
को 0.4 में अपडेट कर दिया गया था.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
व्यू ट्रांज़िशन एपीआई का इस्तेमाल करते समय इन बातों का ध्यान रखें
एक ही पेज पर एक से ज़्यादा व्यू ट्रांज़िशन इफ़ेक्ट इस्तेमाल करते समय, पक्का करें कि आपने कॉन्फ़्लिक्ट से बचने के लिए हर इफ़ेक्ट या सेक्शन के लिए अलग-अलग व्यू ट्रांज़िशन-नाम डाला हो.
जब एक व्यू ट्रांज़िशन चालू (ट्रांसफ़र हो रहा है) होता है, तब यह यूज़र इंटरफ़ेस (यूआई) के बाकी हिस्से पर एक नई लेयर जोड़ देगा. इसलिए, कर्सर घुमाने पर ट्रांज़िशन को ट्रिगर करने से बचें, क्योंकि mouseLeave
इवेंट अचानक ट्रिगर हो जाएगा. ऐसा तब होगा, जब असल कर्सर अब तक हिल न रहा हो.
संसाधन
- View Transit API की मदद से, आसान और बेहतर ट्रांज़िशन
- पूरी जानकारी: एमपीए के लिए ट्रांज़िशन देखें
- केस स्टडी: व्यू ट्रांज़िशन की मदद से, आसान नेविगेशन किया जा सकता है
- केस स्टडी: वेब क्या कर सकता है!? | ऐप्लिकेशन जैसे नेविगेशन डिलीवर करें
- इंटरऑप प्रस्ताव: सभी ब्राउज़र में व्यू ट्रांज़िशन उपलब्ध कराएं
- क्या आपको किसी गड़बड़ी की शिकायत करनी है या किसी नई सुविधा का अनुरोध करना है? हम एसपीए और एमपीए के बारे में आपकी राय जानना चाहते हैं.
इस सीरीज़ के अन्य लेख देखें. इनमें बताया गया है कि सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं, जैसे कि स्क्रोल पर आधारित ऐनिमेशन, पॉपओवर, कंटेनर क्वेरी, और has()
सिलेक्टर का इस्तेमाल करने से ई-कॉमर्स कंपनियों को किस तरह फ़ायदा मिला.