বিকাশকারী পরীক্ষার জন্য প্রস্তুত: স্কোপড ভিউ ট্রানজিশন

Bramus

প্রকাশিত: সেপ্টেম্বর 10, 2025

স্কোপড ভিউ ট্রানজিশন হল ভিউ ট্রানজিশন API- এর একটি প্রস্তাবিত এক্সটেনশন যা আপনাকে DOM-এর একটি সাবট্রিতে ভিউ ট্রানজিশন শুরু করতে দেয়। বৈশিষ্ট্যটি Chrome 140 থেকে পরীক্ষার জন্য প্রস্তুত "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি" chrome://flags এ সক্ষম। আমরা সক্রিয়ভাবে বিকাশকারী প্রতিক্রিয়া খুঁজছি।

দ্রুত ভূমিকা

একটি স্কোপড ভিউ ট্রানজিশন শুরু করতে, যেকোন HTMLElement এ contain: layout প্রয়োগ করে element.startViewTransition() ( document.startViewTransition() ) এর পরিবর্তে কল করুন।

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

ফলাফল হল আপনার নির্বাচিত HTMLElement এর সাবট্রিতে একটি ভিউ ট্রানজিশন স্কোপ করা হয়েছে, যার ফলে ::view-transition pseudo-tree সেই 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
        └─ …

স্কোপড ট্রানজিশন একই সময়ে একাধিক ভিউ ট্রানজিশন চালানোর অনুমতি দেয় (যতক্ষণ তাদের বিভিন্ন ট্রানজিশন রুট থাকে)। পয়েন্টার ইভেন্টগুলি সম্পূর্ণ নথির পরিবর্তে শুধুমাত্র সেই সাবট্রিতে ( যেটি আপনি পুনরায় সক্ষম করতে পারেন ) প্রতিরোধ করা হয়। উপরন্তু, তারা ট্রানজিশন রুটের বাইরের উপাদানগুলিকে স্কোপড ভিউ ট্রানজিশনের উপরে আঁকার অনুমতি দেয়।

স্কোপড ভিউ ট্রানজিশন ব্যাখ্যাকারীতে স্কোপড ভিউ ট্রানজিশন সম্পর্কে সব জানুন।

ডেমো

নিম্নলিখিত ডেমোতে, আপনি বোতামগুলির একটিতে ক্লিক করে একটি বিন্দুকে এর কন্টেইনারের মধ্যে স্থানান্তর করতে পারেন। এটি ডকুমেন্ট-স্কোপড ভিউ ট্রানজিশন বা এলিমেন্ট-স্কোপড ভিউ ট্রানজিশনের সাথে করা যেতে পারে, যাতে আপনি দেখতে পারেন কিভাবে তারা ভিন্নভাবে আচরণ করে।

স্কোপড ভিউ ট্রানজিশনের সাথে, ট্রানজিশনের সময় ডটটি তার প্যারেন্ট দ্বারা ক্লিপ করা থাকে। উপরন্তু দেখানো হলে ডট পপওভারের উপরে আঁকা হয় না।

প্রতিক্রিয়া চেয়েছিলেন

আমরা এই বিষয়ে ওয়েব ডেভেলপার সম্প্রদায়ের প্রতিক্রিয়া জানতে আগ্রহী:

• স্কোপড ভিউ ট্রানজিশন API-এর আকৃতি।
• ব্যবহারের ক্ষেত্রে যেখানে বৈশিষ্ট্যটি ভাল কাজ করে বা প্রত্যাশা অনুযায়ী কাজ করেনি।
• স্ব-অংশগ্রহণের সুযোগ সম্পর্কে প্রশ্নগুলি কীভাবে সমাধান করা উচিত।

CSS WG সমস্যা #9890 কমেন্ট করে আপনার মতামত শেয়ার করুন। প্রতিক্রিয়া ছাড়ার আগে পরিচিত সমস্যা এবং সীমাবদ্ধতার সাথে নিজেকে পরিচিত করুন।

আপনি যদি একটি বাগ করেন, আমাদের জানাতে একটি Chromium বাগ ফাইল করুন ।