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

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>-এর বক্স দ্বারা ক্লিপ করা হয় না:

<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) ক্লিপ ::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-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-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-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)
  ├─ 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 ট্রির কিছু টপোলজি সংরক্ষণ করতে দেয়। এটি বিভিন্ন ধরনের এফেক্ট আনলক করে যা আগে ভিউ ট্রানজিশনের মাধ্যমে সম্ভব ছিল না, যার মধ্যে কিছু আমরা এখানে বর্ণনা করেছি।

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