انتقالهای مشاهده، انتقالهای متحرک و بدون درز بین حالتهای مختلف صفحه وب یا رابط کاربری برنامه هستند. View Transition API به گونه ای طراحی شده است که به شما امکان می دهد این افکت ها را به روشی ساده تر و عملکردی تر از قبل ایجاد کنید. API مزایای متعددی را نسبت به رویکردهای قبلی جاوا اسکریپت ارائه می دهد از جمله:
- تجربه کاربری بهبودیافته: انتقال های روان و نشانه های بصری کاربران را از طریق تغییرات در رابط کاربری راهنمایی می کند و باعث می شود که ناوبری طبیعی و کمتر خسته کننده باشد.
- تداوم بصری: حفظ حس تداوم بین نماها بار شناختی را کاهش میدهد و به کاربران کمک میکند تا در داخل برنامه جهتگیری داشته باشند.
- عملکرد: API سعی می کند تا حد امکان از منابع رشته اصلی استفاده کند که انیمیشن های روان تری ایجاد می کند.
- زیباییشناسی مدرن: انتقالهای بهبودیافته به تجربهای جذاب و جذاب کمک میکنند.
این پست بخشی از مجموعهای است که در مورد چگونگی بهبود وبسایت شرکتهای تجارت الکترونیک با استفاده از ویژگیهای جدید CSS و UI بحث میکند. در این مقاله، نحوه پیاده سازی و بهره مندی برخی از شرکت ها از View Transition API را دریابید.
redBus
redBus همیشه سعی کرده است تا حد امکان بین تجربیات بومی و وب خود برابری ایجاد کند. قبل از View Transition API، پیادهسازی این انیمیشنها در داراییهای وب ما چالش برانگیز بود. اما با استفاده از API، ایجاد انتقالها در سفرهای چند کاربره برای ایجاد تجربه وب بیشتر شبیه به برنامهها، بصری است. همه اینها همراه با مزایای عملکرد، آن را به یک ویژگی ضروری برای همه وب سایت ها تبدیل می کند.- آمیت کومار ، مدیر ارشد مهندسی، redBus .
این تیم در مکانهای مختلف، انتقالهای دید را اجرا کرده است. در اینجا نمونه ای از ترکیبی از fade in و slide in انیمیشن در نماد ورود در صفحه اصلی آورده شده است.
کد
این پیادهسازی از چندین view-transition-name
و انیمیشنهای سفارشی ( scale-down
و scale-up
) استفاده میکند. استفاده از view-transition-name
با یک مقدار منحصربهفرد، مؤلفه sign in را از بقیه صفحه جدا میکند تا آن را به طور جداگانه متحرک کند. ایجاد یک view-transition-name
منحصر به فرد جدید همچنین یک ::view-transition-group
جدید در درخت شبه عنصر ایجاد می کند (در کد زیر نشان داده شده است) که به آن اجازه می دهد جدا از ::view-transition-group(root)
دستکاری شود. ::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
، ما فوراً در مقایسه با پیاده سازی قبلی بدون هیچ گونه تأثیری، انتقال محو شدن دلپذیرتری دریافت می کنیم - Andy Wihalim ، مهندس ارشد نرم افزار، Tokopedia .
قبل از
بعد از
کد
کد زیر از یک فریم ورک React استفاده می کند و شامل کدهای فریمورک خاص مانند flushSync.
درباره کار با فریمورک ها برای پیاده سازی انتقال view بیشتر بخوانید. این یک پیادهسازی اساسی است که بررسی میکند آیا مرورگر از 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})} />
بازار سیاست
عمودی سرمایه گذاری Policybazaar از View Transition API در عناصر راهنمایی مانند «چرا خرید» استفاده کرده است، که باعث جذابیت بصری و بهبود استفاده از چنین ویژگی هایی شده است.
با ترکیب View Transitions، کدهای تکراری CSS و جاوا اسکریپت که مسئول مدیریت انیمیشن ها در حالت های مختلف بودند را حذف کردیم. این باعث صرفه جویی در تلاش توسعه و افزایش قابل توجهی تجربه کاربر شد.- Aman Soni ، مدیر فنی، 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;
}
مواردی که باید هنگام استفاده از View Transition API در نظر بگیرید
هنگام استفاده از جلوههای انتقال چند نمایش در یک صفحه، مطمئن شوید که برای هر افکت یا بخش، یک view-transition-name متفاوت دارید تا از تضادها جلوگیری کنید.
در حالی که یک انتقال view فعال است (در حال انتقال)، یک لایه جدید در بالای بقیه UI اضافه می کند. بنابراین، از فعال کردن انتقال در شناور خودداری کنید، زیرا رویداد mouseLeave
به طور غیرمنتظره ای راه اندازی می شود (زمانی که مکان نما واقعی هنوز حرکت نمی کند).
منابع
- انتقال صاف و ساده با View Transition API
- توضیح دهنده: مشاهده انتقال برای MPA
- مطالعه موردی: ناوبری بدون درز با View Transitions امکان پذیر شده است
- مطالعه موردی: وب می تواند چه کاری انجام دهد!؟ | ناوبری های برنامه مانند را ارائه دهید
- پیشنهاد Interop: انتقال نمایش را در مرورگرها در دسترس قرار دهید
- آیا می خواهید یک اشکال را گزارش کنید یا یک ویژگی جدید درخواست کنید؟ ما می خواهیم از شما در مورد SPA و MPA بشنویم.
سایر مقالات این مجموعه را بررسی کنید که در مورد اینکه چگونه شرکتهای تجارت الکترونیک از استفاده از ویژگیهای جدید CSS و UI مانند انیمیشنهای Scroll-driven، popover، کوئریهای کانتینر و انتخابگر has()
سود میبرند، صحبت کنید.