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

Bramus

Vladimir Levin

প্রকাশিত: ২২ সেপ্টেম্বর, ২০২৫

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

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

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

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

ভিউ ট্রানজিশন চলাকালীন ভাঙা ক্লিপিং এফেক্টের রেকর্ডিং। ডায়ালগের মাধ্যমে টেক্সট ক্লিপ করা উচিত, কিন্তু তা হয় না। এফেক্টকে অতিরঞ্জিত করার জন্য অ্যানিমেশনের সময় ধীর করা হয়।

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

Browser Support

• 140
• 140
• x
• x

একটি সমতল ছদ্ম-গাছ থেকে একটি বাসা বাঁধা ছদ্ম-গাছে

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

লাইভ ডেমো

ডেমো রেকর্ডিং

ডেমো রেকর্ডিং (ধীর গতিতে)

ডেমোটি ভালো করে দেখলে আপনি দেখতে পাবেন যে ট্রানজিশনে একটি সমস্যা আছে: যদিও বর্ণনা সহ অনুচ্ছেদগুলি 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>

<dialog> এ overflow: clip প্রয়োগ করলেও কিছুই হয় না।

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

• সিউডো-ট্রিতে, ডিফল্টরূপে, সমস্ত স্ন্যাপশট একে অপরের ভাইবোন।
• সিউডো-ট্রিটি একটি ::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) clip ::view-transition-group(.text) পেতে, ::view-transition-group(.text) pseudos গুলিকে ::view-transition-group(card) এর সন্তান হতে হবে। এর জন্য, view-transition-group ব্যবহার করুন যা আপনাকে একটি জেনারেটেড ::view-transition-group() pseudo-element এর জন্য একটি "প্যারেন্ট গ্রুপ" বরাদ্দ করতে দেয়।

প্যারেন্ট গ্রুপ পরিবর্তন করতে আপনার কাছে দুটি বিকল্প আছে:

• প্যারেন্টে, view-transition-group contain এ সেট করুন, যাতে এতে view-transition-name সহ সমস্ত শিশু থাকে।
• সকল শিশুর ক্ষেত্রে, view-transition-group পিতামাতার view-transition-name এ সেট করুন। আপনি নিকটতম পূর্বপুরুষ গোষ্ঠীকে লক্ষ্য করতে 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) সিউডো অনুচ্ছেদগুলি ক্লিপ করার জন্য, ::view-transition-group-children(card) সিউডোতে overflow: clip প্রয়োগ করুন:

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

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

লাইভ ডেমো

ডেমো রেকর্ডিং

ডেমো রেকর্ডিং (ধীর গতিতে)

::view-transition-group-children ছদ্মটি কেবল তখনই উপস্থিত থাকে যখন নেস্টেড গ্রুপ ব্যবহার করা হয়। এটি মূল উপাদানের বর্ডার-বক্সের আকারে আকার দেওয়া হয় এবং পূর্ববর্তী উদাহরণে ছদ্ম উপাদান তৈরিকারী উপাদানের মতো একই আকার এবং সীমানা বেধের একটি স্বচ্ছ সীমানা দেওয়া হয়— 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) ছদ্মবেশগুলো ঘোরানোর পাশাপাশি, আপনাকে ::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 ট্রির কিছু টপোলজি সংরক্ষণ করতে দেয়। এটি ভিউ ট্রানজিশনের মাধ্যমে পূর্বে সম্ভব ছিল না এমন বিভিন্ন ধরণের প্রভাব আনলক করে, যার কিছু আমরা এখানে বর্ণনা করেছি।

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