নেস্টেড ভিউ ট্রানজিশন গ্রুপ ব্যবহার করে ভিউ ট্রানজিশনে ক্লিপিং সমস্যা (এবং আরও) প্রতিরোধ করুন

Bramus

Vladimir Levin

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

আপনি যখন একটি ভিউ ট্রানজিশন শুরু করেন, তখন ব্রাউজার স্বয়ংক্রিয়ভাবে view-transition-name দিয়ে ট্যাগ করা উপাদানগুলির স্ন্যাপশটগুলির আগে এবং পরে নেয়৷ এই স্ন্যাপশটগুলি ছদ্ম-উপাদানের একটি গাছে রেন্ডার করা হয়। ডিফল্টরূপে, তৈরি করা গাছটি "ফ্ল্যাট"। এর মানে হল যে DOM-এর মূল অনুক্রমটি হারিয়ে গেছে, এবং সমস্ত ক্যাপচার করা ভিউ ট্রানজিশন গ্রুপ একটি একক ::view-transition pseudo-element-এর অধীনে ভাইবোন।

এই ফ্ল্যাট ট্রি অ্যাপ্রোচ অনেক ইউজ-কেস-এর জন্য যথেষ্ট, কিন্তু কিছু স্টাইলিং ইউজ-কেস আছে যা এটি দিয়ে অর্জন করা যায় না। নিম্নলিখিত প্রভাবগুলির উদাহরণ যা একটি সমতল গাছে একটি অপ্রত্যাশিত ভিজ্যুয়াল প্রভাব ফেলতে পারে:

• ক্লিপিং ( overflow , clip-path , border-radius ): ক্লিপিং উপাদানের বাচ্চাদের প্রভাবিত করে, যার মানে হল ভিউ ট্রানজিশন গ্রুপ ভাইবোন একে অপরকে ক্লিপ করতে পারে না।
• opacity , mask-image এবং filter : একইভাবে, এই প্রভাবগুলি প্রতিটি আইটেমকে পৃথকভাবে প্রভাবিত না করে, শিশুদের প্রভাবিত করে একটি গাছের সম্পূর্ণ রাস্টারাইজড চিত্রে কাজ করার জন্য ডিজাইন করা হয়েছে।
• 3D রূপান্তর ( transform-style , transform , perspective ): 3D রূপান্তর অ্যানিমেশনের সম্পূর্ণ পরিসর প্রদর্শন করতে, কিছু শ্রেণিবিন্যাস বজায় রাখা প্রয়োজন।

নিম্নলিখিত উদাহরণটি একটি ফ্ল্যাট সিউডো-ট্রি দেখায়, যে উপাদানগুলি DOM গাছে পূর্বপুরুষ দ্বারা ক্লিপ করা হয়েছে। ভিউ ট্রানজিশনের সময় এই উপাদানগুলি তাদের ক্লিপিং হারায়, ফলে একটি ভাঙ্গা ভিজ্যুয়াল এফেক্ট হয়।

নেস্টেড ভিউ ট্রানজিশন গ্রুপ হল ট্রানজিশন দেখার একটি এক্সটেনশন যা আপনাকে একে অপরের মধ্যে ::view-transition-group pseudo-elements নেস্ট করতে দেয়। যখন ভিউ ট্রানজিশন গ্রুপগুলি নেস্ট করা হয়, তখন ট্রানজিশনের সময় ক্লিপিংয়ের মতো প্রভাবগুলি পুনরুদ্ধার করা সম্ভব।

একটি ফ্ল্যাট সিউডো-ট্রি থেকে একটি নেস্টেড সিউডো-ট্রিতে

নিম্নলিখিত ডেমোতে আপনি সেই ব্যক্তির সম্পর্কে আরও তথ্য দেখতে একজন ব্যক্তির অবতারে ক্লিক করতে পারেন৷ অ্যানিমেশনগুলি একই-ডকুমেন্ট ভিউ ট্রানজিশন দ্বারা পরিচালিত হয় যা ডায়ালগে ক্লিক করা বোতামটিকে রূপান্তরিত করে, অবতার এবং নামটি স্ক্রীন জুড়ে স্থানান্তরিত করে এবং ডায়ালগ থেকে অনুচ্ছেদগুলিকে উপরে বা নীচে স্লাইড করে।

আপনি যদি ডেমোটি ঘনিষ্ঠভাবে দেখেন তবে আপনি দেখতে পাবেন যে রূপান্তরের সাথে একটি সমস্যা রয়েছে: যদিও বর্ণনা সহ অনুচ্ছেদগুলি DOM-এর <dialog> উপাদানের সন্তান, পাঠ্যটি পরিবর্তনের সময় <dialog> s বক্স দ্বারা ক্লিপ করা হয় না:

<dialog id="info_bramus" closedby="any">
  <h2><img alt="…" class="avatar" height="96" width="96" src="avatar_bramus.jpg"> <span>Bramus</span></h2>
  <p>Bramus is …</p>
  <p>…</p>
</dialog>

overflow: clip <dialog> এ ক্লিপও কিছু করে না।

সমস্যা হল ভিউ ট্রানজিশনগুলি তাদের ছদ্ম গাছ তৈরি এবং রেন্ডার করার উপায়:

• সিউডো-ট্রিতে, ডিফল্টরূপে, সমস্ত স্ন্যাপশট একে অপরের ভাইবোন।
• সিউডো-ট্রি একটি ::view-transition সিউডো-এলিমেন্টে রেন্ডার করা হয় যা পুরো ডকুমেন্টের উপরে রেন্ডার করে।

এই ডেমোর জন্য বিশেষভাবে, DOM ট্রি দেখতে নিচের মত:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  ├─ ::view-transition-group(name)
  │  │  └─ ::view-transition-image-pair(name)
  │  │     ├─ ::view-transition-old(name)
  │  │     └─ ::view-transition-new(name)
  │  ├─ ::view-transition-group(avatar)
  │  │  └─ ::view-transition-image-pair(avatar)
  │  │     ├─ ::view-transition-old(avatar)
  │  │     └─ ::view-transition-new(avatar)
  │  ├─ ::view-transition-group(paragraph1.text)
  │  │  └─ ::view-transition-image-pair(paragraph1.text)
  │  │     └─ ::view-transition-new(paragraph1.text)
  │  └─ ::view-transition-group(paragraph2.text)
  │     └─ ::view-transition-image-pair(paragraph2.text)
  │        └─ ::view-transition-new(paragraph2.text)
  ├─ head
  └─ body
        └─ …

কারণ ::view-transition-group(.text) ছদ্মগুলি ::view-transition-group(card) ছদ্ম-এর ভাইবোনদের উত্তরসূরি, তারা কার্ডের উপরে আঁকা হয়।

::view-transition-group(card) ক্লিপ ::view-transition-group(.text) , ::view-transition-group(.text) ছদ্মগুলি ::view-transition-group(card) এর সন্তান হওয়া উচিত। এর জন্য, view-transition-group ব্যবহার করুন যা আপনাকে একটি জেনারেটেড ::view-transition-group() ছদ্ম-উপাদানের জন্য একটি "অভিভাবক গোষ্ঠী" বরাদ্দ করতে দেয়।

অভিভাবক গোষ্ঠী পরিবর্তন করতে আপনার কাছে দুটি বিকল্প রয়েছে:

• অভিভাবকের উপর, view-transition-group contain জন্য সেট করুন, যাতে এটিতে একটি view-transition-name সহ সমস্ত শিশু থাকে।
• সমস্ত বাচ্চাদের জন্য, অভিভাবকের ভিউ-ট্রানজিশন view-transition-name view-transition-group সেট করুন। আপনি নিকটতম পূর্বপুরুষ গোষ্ঠীকে লক্ষ্য করতে nearest ব্যবহার করতে পারেন।

তাই এই ডেমোর জন্য, নেস্টেড ভিউ ট্রানজিশন গ্রুপ ব্যবহার করতে, কোডটি হয়ে যায়:

button.clicked,
dialog {
  view-transition-group: contain;
}

বা

button.clicked,
dialog *,
  view-transition-group: nearest;
}

এই কোডের জায়গায়, ::view-transition-group(.text) ছদ্মগুলি এখন ::view-transition-group(card) ছদ্ম-এর ভিতরে নেস্টেড হয়৷ এটি একটি অতিরিক্ত ::view-transition-group-children(…) সিউডোতে করা হয়, যা সমস্ত নেস্টেড সিউডোকে একত্রে রাখে:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  ├─ ::view-transition-image-pair(card)
  │  │  │  ├─ ::view-transition-old(card)
  │  │  │  └─ ::view-transition-new(card)
  │  │  └─::view-transition-group-children(card)
  │  │    ├─ ::view-transition-group(paragraph1.text)
  │  │    │  └─ ::view-transition-image-pair(paragraph1.text)
  │  │    │     └─ ::view-transition-new(paragraph1.text)
  │  │    └─ ::view-transition-group(paragraph2.text)
  │  │       └─ ::view-transition-image-pair(paragraph2.text)
  │  │          └─ ::view-transition-new(paragraph2.text)
  │  ├─ ::view-transition-group(name)
  │  │  └─ ::view-transition-image-pair(name)
  │  │     ├─ ::view-transition-old(name)
  │  │     └─ ::view-transition-new(name)
  │  └─ ::view-transition-group(avatar)
  │     └─ ::view-transition-image-pair(avatar)
  │        ├─ ::view-transition-old(avatar)
  │        └─ ::view-transition-new(avatar)
  ├─ head
  └─ body
        └─ …

অবশেষে, ::view-transition-group(card) ছদ্ম অনুচ্ছেদ ক্লিপ করার জন্য, overflow: clip ::view-transition-group-children(card) ছদ্মটিতে:

::view-transition-group-children(card) {
  overflow: clip;
}

ফলাফল নিম্নরূপ:

::view-transition-group-children pseudo শুধুমাত্র উপস্থিত থাকে যখন নেস্টেড গ্রুপ ব্যবহার করা হয়। এটিকে মূল উপাদানের বর্ডার-বাক্সের আকার দেওয়া হয় এবং আগের উদাহরণে সিউডো উপাদান- card তৈরি করা উপাদানটির মতো একই আকার এবং সীমানা বেধের সাথে একটি স্বচ্ছ সীমানা দেওয়া হয়।

ক্লিপিং এবং আরো

নেস্টেড ভিউ ট্রানজিশন গ্রুপ ক্লিপিং ইফেক্ট ছাড়া অন্য জায়গায় ব্যবহার করা হয়। আরেকটি উদাহরণ হল 3D প্রভাব। নিম্নলিখিত ডেমোতে ট্রানজিশনের সময় কার্ডটিকে 3D তে ঘোরানোর একটি বিকল্প রয়েছে।

html:active-view-transition-type(open) {
    &::view-transition-old(card) {
        animation-name: rotate-out;
    }
    &::view-transition-new(card) {
        animation-name: rotate-in;
    }
}
html:active-view-transition-type(close) {
    &::view-transition-old(card) {
        animation-name: rotate-in;
    }
    &::view-transition-new(card) {
        animation-name: rotate-out;
    }
}

নেস্টেড ভিউ ট্রানজিশন গ্রুপ ছাড়া, অবতার এবং নাম কার্ডের সাথে ঘোরে না।

কার্ডের ভিতরে অবতার এবং নাম ছদ্ম বাসা বাঁধার মাধ্যমে, 3D প্রভাব পুনরুদ্ধার করা যেতে পারে। কিন্তু যে শুধুমাত্র জিনিস আপনি করতে হবে না. ::view-transition-old(card) এবং ::view-transition-new(card) pseudos ঘোরানোর পাশাপাশি, আপনাকে ::view-transition-group-children(card) একটি ঘোরাতে হবে।

html:active-view-transition-type(open) {
    &::view-transition-group-children(card) {
        animation: rotate-in var(--duration) ease;
        backface-visibility: hidden;
    }
}
html:active-view-transition-type(close) {
    &::view-transition-group-children(card) {
        animation: rotate-out var(--duration) ease;
        backface-visibility: hidden;
    }
}

আরো ডেমো

নিম্নলিখিত উদাহরণে নেস্টেড ভিউ ট্রানজিশন গ্রুপগুলি কার্ডগুলি তাদের পূর্বপুরুষ স্ক্রলার দ্বারা ক্লিপ করা হয়েছে তা নিশ্চিত করতে ব্যবহার করা হয়। আপনি অন্তর্ভুক্ত নিয়ন্ত্রণগুলি ব্যবহার করে নেস্টেড ভিউ ট্রানজিশন গোষ্ঠীর ব্যবহার চালু বা বন্ধ করতে পারেন।

এই ডেমো সম্পর্কে মজার বিষয় হল যে সমস্ত ::view-transition-group(.card) ছদ্মগুলি ভিতরে থাকে—এবং পূর্বপুরুষ ::view-transition-group(cards) ছদ্ম দ্বারা ক্লিপ করা হয়৷ #targeted-card বাদ দেওয়া হয়েছে কারণ এর প্রবেশ/প্রস্থান অ্যানিমেশন ::view-transition-group(cards) দ্বারা ক্লিপ করা উচিত নয়।

/* The .cards wrapper contains all children */
.cards {
  view-transition-name: cards;
  view-transition-group: contain;
}

/* Contents that bleed out get clipped */
&::view-transition-group-children(cards) {
  overflow: clip;
}

/* Each card is given a v-t-name and v-t-class */
.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

/* The targeted card is given a unique name (to style the pseudo differently)
   and shouldn't be contained by the ::view-transition-group-children(cards) pseudo */
#targeted-card {
  view-transition-name: targeted-card;
  view-transition-group: none;
}

রিক্যাপ

নেস্টেড ভিউ ট্রানজিশন আপনাকে ছদ্ম উপাদানগুলি তৈরি করার সময় DOM গাছের কিছু টপোলজি সংরক্ষণ করতে দেয়। এটি দৃশ্য ট্রানজিশনের সাথে পূর্বে সম্ভব নয় এমন বিভিন্ন প্রভাব আনলক করে, যার কয়েকটি আমরা এখানে বর্ণনা করেছি।

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