منتشر شده: ۲۷ مارس ۲۰۲۶
کروم ۱۴۷ انتقالهای نمای محدود به عنصر را معرفی میکند، قابلیتی که به شما امکان میدهد با فراخوانی Element.startViewTransition() یک انتقال نمای را در یک زیردرخت از DOM شروع کنید.
این ویژگی امکان اجرای همزمان چندین انتقال نما را فراهم میکند، به شما امکان میدهد انتقالهای نمای در حال انجام را تودرتو کنید و مشکلات لایهبندی را با محتوای position: fixed حل میکند - همه اینها در حالی است که بقیه صفحه تعاملی باقی میماند.
چه چیزی تغییر کرده است؟
از آنجایی که اعلام کردیم این ویژگی برای آزمایش توسعهدهندگان در کروم ۱۴۰ آماده است ، با جامعه و گروه کاری CSS همکاری کردیم تا جزئیات را نهایی کنیم، به خصوص در مورد رفتارهای پیشفرض:
- ریشههای دامنه به طور پیشفرض خود-مشارکتی هستند.
- انتقالهای نمای محدود شده به طور خودکار با استفاده از گروههای انتقال نمای تو در تو، شامل شبه کدهای تو در تو میشوند.
- شبه تابع
::view-transition-group-children()در یک گذار نمای محدود، در صورتی که ریشه دامنه، سرریز خود را قطع کند، به طور خودکار محتوای خود را قطع میکند. - انتقالهای نمای محدود به عنصر به طور خودکار
contain: layoutوview-transition-scope: allدر طول انتقال روی ریشه دامنه اعمال میشوند.
پس از این بهروزرسانیها، انتقالهای نمای مبتنی بر عنصر از نسخه ۱۴۷ به بعد در کروم پایدار در دسترس هستند.
دموها
بُر زدن لیستها
این نسخه آزمایشی به شما امکان میدهد موارد موجود در هر لیست را جابجا کنید. همچنین میتوانید با انتخاب دکمهای که در مرکز قرار دارد، جای لیستها را عوض کنید.
نسخه آزمایشی زنده
ضبط نسخه آزمایشی
از آنجا که از انتقالهای نمای محدود به عنصر استفاده میشود، هر دو لیست میتوانند انتقالهای نمای درهمریخته خود را همزمان اجرا کنند. همچنین میتوانید انتقال نمای بیرونی را شروع کنید که موقعیت لیستها را عوض میکند، در حالی که آیتمهای لیست هنوز در حال سازماندهی مجدد هستند.
سفر من به پاتاگونیا
دموی «سفر من به پاتاگونیا» انتقالهای نمای مبتنی بر عنصر را نشان میدهد. این دمو بر اساس ویدیوی کمپین «تجربه کاربری وب، بازطراحیشده» ساخته شده است.
از منوی کشویی برای فیلتر کردن موارد شبکهای استفاده کنید. از دکمهی «افزودن » روی هر مورد شبکهای برای اضافه کردن آنها به لیست موارد انتخاب شده که در نوار کناری ظاهر میشود، استفاده کنید.
نسخه آزمایشی زنده
برای مشاهده نسخه آزمایشی کامل، «سفر من به پاتاگونیا» را در یک برگه جداگانه باز کنید.
ضبط نسخه آزمایشی
این نسخه آزمایشی از انتقالهای نمای محدود به عنصر در سه مکان استفاده میکند:
- شبکهی آیتمها هنگام فیلتر کردن آنها.
- موارد شبکه هنگام اضافه کردن آنها به لیست موارد انتخاب شده.
- نوار کناری که لیست موارد انتخاب شده را نشان میدهد.
راهنما را بخوانید
برای یادگیری همه چیز در مورد انتقالهای نمای محدود به عنصر، راهنما را بخوانید . این راهنما به شما نشان میدهد که چگونه انتقالهای نمای محدود به عنصر را پیادهسازی کنید، جزئیات بیشتر را توضیح میدهد و شامل دموهای بیشتری است.