آماده برای آزمایش توسعه‌دهنده: انتقال نمای محدوده

Bramus

تاریخ انتشار: 10 سپتامبر 2025

Scoped view transitions یک برنامه افزودنی پیشنهادی برای View Transition API است که به شما امکان می دهد یک انتقال view را در زیر درخت DOM شروع کنید. این ویژگی برای آزمایش از Chrome 140 با پرچم "ویژگی های پلتفرم وب آزمایشی" در chrome://flags فعال است. ما فعالانه به دنبال بازخورد توسعه‌دهندگان هستیم.

معرفی سریع

برای شروع یک انتقال نمای scoped، element.startViewTransition() (به جای document.startViewTransition() ) را روی هر HTMLElement که روی آن contain: layout کنید.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

نتیجه یک انتقال view است که به زیردرخت HTMLElement انتخابی شما اختصاص یافته است، که در نتیجه شبه درخت ::view-transition به آن HTMLElement تزریق می شود. HTMLElement به عنوان یک ظرف برای انیمیشن های انتقال عمل می کند.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

انتقال‌های Scoped اجازه می‌دهند تا انتقال‌های چند نمایه به طور همزمان اجرا شوند (تا زمانی که ریشه‌های انتقال متفاوتی داشته باشند). رویدادهای اشاره گر فقط در آن زیردرخت ( که می توانید دوباره فعال کنید )، به جای کل سند، جلوگیری می شود. علاوه بر این، آنها به عناصر خارج از ریشه انتقال اجازه می دهند تا در بالای انتقال نمای scoped نقاشی شوند.

همه چیز را در مورد انتقال نمای scoped در توضیح دهنده انتقال نمای scoped بیاموزید.

نسخه ی نمایشی

در دمو زیر می‌توانید با کلیک روی یکی از دکمه‌ها، یک نقطه را در ظرف آن جابه‌جا کنید. این را می توان با انتقال نمای با محدوده سند یا انتقال نمای با محدوده عنصر انجام داد، که به شما امکان می دهد نحوه رفتار متفاوت آنها را ببینید.

با انتقال نمای scoped، نقطه در طول انتقال توسط والد خود بریده می شود. علاوه بر این، هنگامی که نشان داده می شود، نقطه روی پاپاور نقاشی نمی شود.

بازخورد خواسته شد

ما علاقه مند به بازخورد جامعه توسعه دهندگان وب در مورد زیر هستیم:

• شکل Scoped View Transitions API.
• مواردی که این ویژگی به خوبی کار می کند یا آنطور که انتظار می رفت کار نمی کند.
• چگونه سؤالات مربوط به حوزه های خود مشارکتی باید حل شود.

بازخورد خود را با نظر دادن در مورد شماره 9890 CSS WG به اشتراک بگذارید. قبل از گذاشتن بازخورد، با مسائل و محدودیت های شناخته شده آشنا شوید.

اگر با یک اشکال مواجه شدید، یک اشکال Chromium را ثبت کنید تا به ما اطلاع دهید.