ভিউ ট্রানজিশনে নতুন কি (2025 আপডেট)

Bramus

প্রকাশিত: অক্টোবর 08, 2025

2023 সালে আমরা একই-ডকুমেন্ট ভিউ ট্রানজিশন পাঠানোর পর থেকে অনেক পরিবর্তন হয়েছে।

2024 সালে আমরা ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন পাঠিয়েছি, view-transition-class এবং ভিউ ট্রানজিশন প্রকারের মতো পরিমার্জন যোগ করেছি এবং সাফারিকে ভিউ ট্রানজিশনের জন্য সমর্থন যোগ করার জন্য স্বাগত জানাই।

এই পোস্টটি আপনাকে 2025 সালে ভিউ ট্রানজিশনের জন্য কী পরিবর্তন হয়েছে তার একটি ওভারভিউ দেয়।

উন্নত ব্রাউজার এবং ফ্রেমওয়ার্ক সমর্থন

একই-ডকুমেন্ট ভিউ ট্রানজিশনগুলি নতুনভাবে উপলব্ধ বেসলাইন হতে চলেছে৷

ইন্টারপ 2025- এর একটি ফোকাস এলাকা হল ভিউ ট্রানজিশন API, বিশেষ করে একই-ডকুমেন্ট ভিউ ট্রানজিশন document.startViewTransition(updateCallback) , view-transition-class , view-transition-name: match-element এবং :active-view-transition CSS সিলেক্টর।

Firefox এই বৈশিষ্ট্যগুলিকে আসন্ন Firefox 144 রিলিজে অন্তর্ভুক্ত করতে চায় যা 14 অক্টোবর, 2025-এ স্থিতিশীল হবে৷ এটি এই বৈশিষ্ট্যগুলি বেসলাইন নতুনভাবে উপলব্ধ করবে৷

ভিউ ট্রানজিশন API-এর জন্য সমর্থন এখন প্রতিক্রিয়া কোরে রয়েছে

সারা বছর ধরে, React টিম React এর মূল অংশে ভিউ ট্রানজিশন যোগ করার জন্য কাজ করছে। তারা এপ্রিলে আবার react@experimental সমর্থন ঘোষণা করেছে এবং এই সপ্তাহে, React Conf-এ, তারা এটির সমর্থনকে react@canary তে সরিয়ে দিয়েছে যার মানে ডিজাইন চূড়ান্তের কাছাকাছি।

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

আপনি সমস্ত বিশদ বিবরণের জন্য প্রতিক্রিয়ার <ViewTransition> ডক্সগুলি দেখতে পারেন বা বিষয়টিতে একটি ভাল ভূমিকার জন্য Aurora Scharff-এর এই আলোচনাটি দেখতে পারেন ।

সম্প্রতি পাঠানো বৈশিষ্ট্য

view-transition-name: match-element

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

যাইহোক, অনন্যভাবে নামকরণ উপাদানগুলি কঠিন হয়ে উঠতে পারে যখন অনেকগুলি উপাদান স্থানান্তরিত হয় যা প্রকৃতপক্ষে পরিবর্তিত হয় না। আপনার যদি 100টি উপাদান থাকে যা একটি তালিকায় স্থানান্তরিত হয়, তাহলে আপনাকে 100টি অনন্য নাম নিয়ে আসতে হবে।

match-element জন্য ধন্যবাদ আপনাকে এটি করার দরকার নেই। view-transition-name মান হিসাবে এটি ব্যবহার করার সময়, ব্রাউজার উপাদানটির পরিচয়ের উপর ভিত্তি করে প্রতিটি মিলে যাওয়া উপাদানের জন্য একটি অভ্যন্তরীণ view-transition-name তৈরি করবে।

নিম্নলিখিত ডেমোতে এই পদ্ধতি ব্যবহার করা হয়। সারির প্রতিটি কার্ড একটি স্বয়ংক্রিয়ভাবে তৈরি view-transition-name পায়।

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

একটি কার্ড যা প্রবেশ করে বা প্রস্থান করে একটি সুস্পষ্ট নাম পায়। সেই নামটি সেই স্ন্যাপশটে নির্দিষ্ট অ্যানিমেশন সংযুক্ত করতে CSS-এ ব্যবহৃত হয়। অন্যান্য সমস্ত কার্ডের স্ন্যাপশটগুলি তাদের সাথে যুক্ত view-transition-class ব্যবহার করে স্টাইল করা হয়েছে।

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

DevTools এখন একটি view-transition-class ব্যবহার করে এমন ছদ্মগুলিকে লক্ষ্য করে নিয়ম দেখায়

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

পূর্বে, ::view-transition-* ছদ্ম-উপাদানগুলির একটি পরিদর্শন করার সময়, Chrome DevTools তাদের সেট view-transition-class ব্যবহার করে সিউডোদের লক্ষ্য করা নিয়মগুলি প্রকাশ করেনি। এটি Chrome 139 এ পরিবর্তিত হয়েছে, যা কার্যকারিতা যোগ করেছে।

নেস্টেড ভিউ ট্রানজিশন গ্রুপগুলি Chrome 140 থেকে উপলব্ধ

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

এই ফ্ল্যাট ট্রি পদ্ধতিটি অনেক ব্যবহারের ক্ষেত্রে যথেষ্ট, কিন্তু যখন ক্লিপিং বা 3D রূপান্তরের মতো ভিজ্যুয়াল এফেক্ট ব্যবহার করা হয় তখন সমস্যা হয়ে ওঠে। এগুলোর জন্য গাছে কিছু শ্রেণিবিন্যাস প্রয়োজন।

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

কিভাবে ভিউ ট্রানজিশন গ্রুপ ব্যবহার করবেন তা জানুন

ছদ্ম-উপাদানগুলি এখন আরও অ্যানিমেশন বৈশিষ্ট্যের উত্তরাধিকারী

আপনি যখন একটি ::view-transition-group(…) ছদ্ম-এ animation-* লংহ্যান্ড বৈশিষ্ট্যগুলির একটি সেট করেন, এতে রয়েছে ::view-transition-image-pair(…) , ::view-transition-old(…) , এবং ::view-transition-new(…) ও সেই সম্পত্তির উত্তরাধিকারী হয়। এটি সুবিধাজনক কারণ এটি স্বয়ংক্রিয়ভাবে ::view-transition-new(…) এবং ::view-transition-old(…) এর মধ্যে ক্রস-ফেডকে ::view-transition-group(…) এর সাথে সিঙ্ক করে রাখে।

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

প্রাথমিকভাবে এই উত্তরাধিকার animation-duration এবং animation-fill-mode সীমাবদ্ধ ছিল (এবং পরে animation-delay ), কিন্তু এখন এটি আরও অ্যানিমেশন লংহ্যান্ডের উত্তরাধিকারের জন্য প্রসারিত করা হয়েছে।

যে ব্রাউজারগুলি ভিউ ট্রানজিশন সমর্থন করে, এখন তাদের ব্যবহারকারী-এজেন্ট স্টাইলশীটে নিম্নলিখিতগুলি থাকা উচিত৷

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

ছদ্ম-উপাদানগুলিকে উত্তরাধিকারসূত্রে আরো বৈশিষ্ট্যগুলি Chrome 140-এ পাঠানো হয়েছে৷

finished প্রতিশ্রুতি কলব্যাক কার্যকর করা আর একটি ফ্রেমের জন্য অপেক্ষা করে না

একটি কলব্যাক কার্যকর করার জন্য finished প্রতিশ্রুতি ব্যবহার করার সময়, ক্রোম সেই যুক্তিটি কার্যকর করার আগে একটি ফ্রেম তৈরি হওয়ার জন্য অপেক্ষা করত। এটি অ্যানিমেশনের শেষে একটি ঝাঁকুনি সৃষ্টি করতে পারে যখন স্ক্রিপ্ট একটি দৃশ্যমান অনুরূপ অবস্থা সংরক্ষণের প্রয়াসে কিছু শৈলীকে চারপাশে সরিয়ে দেয়।

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

সময়ের এই পরিবর্তনটি লাইফসাইকেল শেষ হওয়ার পরে অ্যাসিঙ্ক্রোনাসভাবে চালানোর জন্য ভিউ ট্রানজিশন ক্লিন আপ পদক্ষেপগুলি সরিয়ে পরিস্থিতি সংশোধন করে। এটি নিশ্চিত করে যে finished প্রতিশ্রুতি রেজোলিউশনে উত্পাদিত ভিজ্যুয়াল ফ্রেমটি এখনও ভিউ ট্রানজিশন কাঠামো বজায় রাখে, যার ফলে ফ্লিকার এড়ানো যায়।

এই সময় পরিবর্তন Chrome 140 এ পাঠানো হয়েছে।

আসন্ন বৈশিষ্ট্য

বছর এখনও শেষ হয়নি, তাই আরও কিছু বৈশিষ্ট্য পাঠানোর জন্য এখনও কিছু সময় আছে।

স্কোপড ভিউ ট্রানজিশনগুলি Chrome 140-এ পরীক্ষার জন্য প্রস্তুত৷

স্কোপড ভিউ ট্রানজিশন হল ভিউ ট্রানজিশন API-এর একটি প্রস্তাবিত এক্সটেনশন যা আপনাকে যেকোন HTMLElement এ element.startViewTransition() ( document.startViewTransition() ) এর পরিবর্তে DOM-এর একটি সাবট্রিতে ভিউ ট্রানজিশন শুরু করতে দেয়।

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

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

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

Chrome 142-এ ::view-transition অবস্থান fixed থেকে absolute পরিবর্তিত হবে

::view-transition সিউডো বর্তমানে position: fixed ব্যবহার করে অবস্থান করছে। একটি CSS ওয়ার্কিং গ্রুপ রেজোলিউশন অনুসরণ করে এটি position: absolute ।

এই position মান fixed থেকে absolute -এ পরিবর্তিত হয় -যা Chrome 142-এ আসছে-টি দৃশ্যত পর্যবেক্ষণযোগ্য নয় কারণ ::view-transition pseudo-এর ধারণকৃত ব্লকটি যেভাবেই হোক ব্লক ধারণকারী স্ন্যাপশট। একটি getComputedStyle করার সময় শুধুমাত্র পর্যবেক্ষণযোগ্য প্রভাব হল একটি ভিন্ন position মান।

document.activeViewTransition Chrome 142 এ আসছে

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

আপনাকে ম্যানুয়ালি এই উদাহরণের ট্র্যাক রাখার প্রয়োজনের পরিবর্তে, Chrome এখন একটি document.activeViewTransition বৈশিষ্ট্য প্রদান করে যা এই বস্তুর প্রতিনিধিত্ব করে৷ যদি কোনো রূপান্তর চলমান না থাকে, তাহলে এর মান null ।

একই-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, যখন আপনি document.startViewTransition কল করেন তখন মান সেট হয়ে যায়। ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, আপনি pageswap এবং pagereveal ইভেন্টে সেই ViewTransition ইনস্ট্যান্স অ্যাক্সেস করতে পারেন।

document.activeViewTransition এর জন্য সমর্থন Chrome 142-এ শিপ করতে চলেছে৷

ViewTransition.waitUntil দিয়ে স্বয়ংক্রিয়ভাবে শেষ হওয়া থেকে একটি ভিউ ট্রানজিশন প্রতিরোধ করুন

একটি ভিউ ট্রানজিশন স্বয়ংক্রিয়ভাবে তার সমস্ত অ্যানিমেশন শেষ হয়ে গেলে তার finished অবস্থায় পৌঁছে যায়। এই স্বয়ংক্রিয় সমাপ্তি প্রতিরোধ করতে, আপনি শীঘ্রই ViewTranistion.waitUntil ব্যবহার করতে পারেন। একটি প্রতিশ্রুতিতে পাস করার সময়, ViewTransition শুধুমাত্র তার finished অবস্থায় পৌঁছাবে যখন সেই পাস করা প্রতিশ্রুতিটিও সমাধান করা হয়।

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

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

এরপর কি

আপনি দেখতে পাচ্ছেন যে 2023 সালে আমরা প্রাথমিকভাবে ভিউ ট্রানজিশন পাঠানোর পর থেকে আমরা স্থির ছিলাম না। আমরা ভবিষ্যতে স্কোপড ভিউ ট্রানজিশন শিপিংয়ের জন্য উন্মুখ এবং বরাবরের মতো, প্রতিক্রিয়ার জন্য উন্মুক্ত।

ভিউ ট্রানজিশন সম্পর্কে আপনার কোনো প্রশ্ন থাকলে, সোশ্যাল মিডিয়াতে আমাদের সাথে যোগাযোগ করুন। ভিউ ট্রানজিশনের জন্য ফিচার অনুরোধগুলি CSS WG-তে ফাইল করা যেতে পারে। আপনার যদি কোনো বাগ হয়, আমাদের জানাতে একটি Chromium বাগ ফাইল করুন ।

Bramus

প্রকাশিত: অক্টোবর 08, 2025

2023 সালে আমরা একই-ডকুমেন্ট ভিউ ট্রানজিশন পাঠানোর পর থেকে অনেক পরিবর্তন হয়েছে।

2024 সালে আমরা ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন পাঠিয়েছি, view-transition-class এবং ভিউ ট্রানজিশন প্রকারের মতো পরিমার্জন যোগ করেছি এবং সাফারিকে ভিউ ট্রানজিশনের জন্য সমর্থন যোগ করার জন্য স্বাগত জানাই।

এই পোস্টটি আপনাকে 2025 সালে ভিউ ট্রানজিশনের জন্য কী পরিবর্তন হয়েছে তার একটি ওভারভিউ দেয়।

উন্নত ব্রাউজার এবং ফ্রেমওয়ার্ক সমর্থন

একই-ডকুমেন্ট ভিউ ট্রানজিশনগুলি নতুনভাবে উপলব্ধ বেসলাইন হতে চলেছে৷

ইন্টারপ 2025- এর একটি ফোকাস এলাকা হল ভিউ ট্রানজিশন API, বিশেষ করে একই-ডকুমেন্ট ভিউ ট্রানজিশন document.startViewTransition(updateCallback) , view-transition-class , view-transition-name: match-element এবং :active-view-transition CSS সিলেক্টর।

Firefox এই বৈশিষ্ট্যগুলিকে আসন্ন Firefox 144 রিলিজে অন্তর্ভুক্ত করতে চায় যা 14 অক্টোবর, 2025-এ স্থিতিশীল হবে৷ এটি এই বৈশিষ্ট্যগুলি বেসলাইন নতুনভাবে উপলব্ধ করবে৷

ভিউ ট্রানজিশন API-এর জন্য সমর্থন এখন প্রতিক্রিয়া কোরে রয়েছে

সারা বছর ধরে, React টিম React এর মূল অংশে ভিউ ট্রানজিশন যোগ করার জন্য কাজ করছে। তারা এপ্রিলে আবার react@experimental সমর্থন ঘোষণা করেছে এবং এই সপ্তাহে, React Conf-এ, তারা এটির সমর্থনকে react@canary তে সরিয়ে দিয়েছে যার মানে ডিজাইন চূড়ান্তের কাছাকাছি।

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

আপনি সমস্ত বিশদ বিবরণের জন্য প্রতিক্রিয়ার <ViewTransition> ডক্সগুলি দেখতে পারেন বা বিষয়টিতে একটি ভাল ভূমিকার জন্য Aurora Scharff-এর এই আলোচনাটি দেখতে পারেন ।

সম্প্রতি পাঠানো বৈশিষ্ট্য

view-transition-name: match-element

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

যাইহোক, অনন্যভাবে নামকরণ উপাদানগুলি কঠিন হয়ে উঠতে পারে যখন অনেকগুলি উপাদান স্থানান্তরিত হয় যা প্রকৃতপক্ষে পরিবর্তিত হয় না। আপনার যদি 100টি উপাদান থাকে যা একটি তালিকায় স্থানান্তরিত হয়, তাহলে আপনাকে 100টি অনন্য নাম নিয়ে আসতে হবে।

match-element জন্য ধন্যবাদ আপনাকে এটি করার দরকার নেই। view-transition-name মান হিসাবে এটি ব্যবহার করার সময়, ব্রাউজার উপাদানটির পরিচয়ের উপর ভিত্তি করে প্রতিটি মিলে যাওয়া উপাদানের জন্য একটি অভ্যন্তরীণ view-transition-name তৈরি করবে।

নিম্নলিখিত ডেমোতে এই পদ্ধতি ব্যবহার করা হয়। সারির প্রতিটি কার্ড একটি স্বয়ংক্রিয়ভাবে তৈরি view-transition-name পায়।

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

একটি কার্ড যা প্রবেশ করে বা প্রস্থান করে একটি সুস্পষ্ট নাম পায়। সেই নামটি সেই স্ন্যাপশটে নির্দিষ্ট অ্যানিমেশন সংযুক্ত করতে CSS-এ ব্যবহৃত হয়। অন্যান্য সমস্ত কার্ডের স্ন্যাপশটগুলি তাদের সাথে যুক্ত view-transition-class ব্যবহার করে স্টাইল করা হয়েছে।

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

DevTools এখন একটি view-transition-class ব্যবহার করে এমন ছদ্মগুলিকে লক্ষ্য করে নিয়ম দেখায়

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

পূর্বে, ::view-transition-* ছদ্ম-উপাদানগুলির একটি পরিদর্শন করার সময়, Chrome DevTools তাদের সেট view-transition-class ব্যবহার করে সিউডোদের লক্ষ্য করা নিয়মগুলি প্রকাশ করেনি। এটি Chrome 139 এ পরিবর্তিত হয়েছে, যা কার্যকারিতা যোগ করেছে।

নেস্টেড ভিউ ট্রানজিশন গ্রুপগুলি Chrome 140 থেকে উপলব্ধ

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

এই ফ্ল্যাট ট্রি পদ্ধতিটি অনেক ব্যবহারের ক্ষেত্রে যথেষ্ট, কিন্তু যখন ক্লিপিং বা 3D রূপান্তরের মতো ভিজ্যুয়াল এফেক্ট ব্যবহার করা হয় তখন সমস্যা হয়ে ওঠে। এগুলোর জন্য গাছে কিছু শ্রেণিবিন্যাস প্রয়োজন।

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

কিভাবে ভিউ ট্রানজিশন গ্রুপ ব্যবহার করবেন তা জানুন

ছদ্ম-উপাদানগুলি এখন আরও অ্যানিমেশন বৈশিষ্ট্যের উত্তরাধিকারী

আপনি যখন একটি ::view-transition-group(…) ছদ্ম-এ animation-* লংহ্যান্ড বৈশিষ্ট্যগুলির একটি সেট করেন, এতে রয়েছে ::view-transition-image-pair(…) , ::view-transition-old(…) , এবং ::view-transition-new(…) ও সেই সম্পত্তির উত্তরাধিকারী হয়। এটি সুবিধাজনক কারণ এটি স্বয়ংক্রিয়ভাবে ::view-transition-new(…) এবং ::view-transition-old(…) এর মধ্যে ক্রস-ফেডকে ::view-transition-group(…) এর সাথে সিঙ্ক করে রাখে।

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

প্রাথমিকভাবে এই উত্তরাধিকার animation-duration এবং animation-fill-mode সীমাবদ্ধ ছিল (এবং পরে animation-delay ), কিন্তু এখন এটি আরও অ্যানিমেশন লংহ্যান্ডের উত্তরাধিকারের জন্য প্রসারিত করা হয়েছে।

যে ব্রাউজারগুলি ভিউ ট্রানজিশন সমর্থন করে, এখন তাদের ব্যবহারকারী-এজেন্ট স্টাইলশীটে নিম্নলিখিতগুলি থাকা উচিত৷

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

ছদ্ম-উপাদানগুলিকে উত্তরাধিকারসূত্রে আরো বৈশিষ্ট্যগুলি Chrome 140-এ পাঠানো হয়েছে৷

finished প্রতিশ্রুতি কলব্যাক কার্যকর করা আর একটি ফ্রেমের জন্য অপেক্ষা করে না

একটি কলব্যাক কার্যকর করার জন্য finished প্রতিশ্রুতি ব্যবহার করার সময়, ক্রোম সেই যুক্তিটি কার্যকর করার আগে একটি ফ্রেম তৈরি হওয়ার জন্য অপেক্ষা করত। এটি অ্যানিমেশনের শেষে একটি ঝাঁকুনি সৃষ্টি করতে পারে যখন স্ক্রিপ্ট একটি দৃশ্যমান অনুরূপ অবস্থা সংরক্ষণের প্রয়াসে কিছু শৈলীকে চারপাশে সরিয়ে দেয়।

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

সময়ের এই পরিবর্তনটি লাইফসাইকেল শেষ হওয়ার পরে অ্যাসিঙ্ক্রোনাসভাবে চালানোর জন্য ভিউ ট্রানজিশন ক্লিন আপ পদক্ষেপগুলি সরিয়ে পরিস্থিতি সংশোধন করে। এটি নিশ্চিত করে যে finished প্রতিশ্রুতি রেজোলিউশনে উত্পাদিত ভিজ্যুয়াল ফ্রেমটি এখনও ভিউ ট্রানজিশন কাঠামো বজায় রাখে, যার ফলে ফ্লিকার এড়ানো যায়।

এই সময় পরিবর্তন Chrome 140 এ পাঠানো হয়েছে।

আসন্ন বৈশিষ্ট্য

বছর এখনও শেষ হয়নি, তাই আরও কিছু বৈশিষ্ট্য পাঠানোর জন্য এখনও কিছু সময় আছে।

স্কোপড ভিউ ট্রানজিশনগুলি Chrome 140-এ পরীক্ষার জন্য প্রস্তুত৷

স্কোপড ভিউ ট্রানজিশন হল ভিউ ট্রানজিশন API-এর একটি প্রস্তাবিত এক্সটেনশন যা আপনাকে যেকোন HTMLElement এ element.startViewTransition() ( document.startViewTransition() ) এর পরিবর্তে DOM-এর একটি সাবট্রিতে ভিউ ট্রানজিশন শুরু করতে দেয়।

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

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

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

Chrome 142-এ ::view-transition অবস্থান fixed থেকে absolute পরিবর্তিত হবে

::view-transition সিউডো বর্তমানে position: fixed ব্যবহার করে অবস্থান করছে। একটি CSS ওয়ার্কিং গ্রুপ রেজোলিউশন অনুসরণ করে এটি position: absolute ।

এই position মান fixed থেকে absolute -এ পরিবর্তিত হয় -যা Chrome 142-এ আসছে-টি দৃশ্যত পর্যবেক্ষণযোগ্য নয় কারণ ::view-transition pseudo-এর ধারণকৃত ব্লকটি যেভাবেই হোক ব্লক ধারণকারী স্ন্যাপশট। একটি getComputedStyle করার সময় শুধুমাত্র পর্যবেক্ষণযোগ্য প্রভাব হল একটি ভিন্ন position মান।

document.activeViewTransition Chrome 142 এ আসছে

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

আপনাকে ম্যানুয়ালি এই উদাহরণের ট্র্যাক রাখার প্রয়োজনের পরিবর্তে, Chrome এখন একটি document.activeViewTransition বৈশিষ্ট্য প্রদান করে যা এই বস্তুর প্রতিনিধিত্ব করে৷ যদি কোনো রূপান্তর চলমান না থাকে, তাহলে এর মান null ।

একই-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, যখন আপনি document.startViewTransition কল করেন তখন মান সেট হয়ে যায়। ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, আপনি pageswap এবং pagereveal ইভেন্টে সেই ViewTransition ইনস্ট্যান্স অ্যাক্সেস করতে পারেন।

document.activeViewTransition এর জন্য সমর্থন Chrome 142-এ শিপ করতে চলেছে৷

ViewTransition.waitUntil দিয়ে স্বয়ংক্রিয়ভাবে শেষ হওয়া থেকে একটি ভিউ ট্রানজিশন প্রতিরোধ করুন

একটি ভিউ ট্রানজিশন স্বয়ংক্রিয়ভাবে তার সমস্ত অ্যানিমেশন শেষ হয়ে গেলে তার finished অবস্থায় পৌঁছে যায়। এই স্বয়ংক্রিয় সমাপ্তি প্রতিরোধ করতে, আপনি শীঘ্রই ViewTranistion.waitUntil ব্যবহার করতে পারেন। একটি প্রতিশ্রুতিতে পাস করার সময়, ViewTransition শুধুমাত্র তার finished অবস্থায় পৌঁছাবে যখন সেই পাস করা প্রতিশ্রুতিটিও সমাধান করা হয়।

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

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

এরপর কি

আপনি দেখতে পাচ্ছেন যে 2023 সালে আমরা প্রাথমিকভাবে ভিউ ট্রানজিশন পাঠানোর পর থেকে আমরা স্থির ছিলাম না। আমরা ভবিষ্যতে স্কোপড ভিউ ট্রানজিশন শিপিংয়ের জন্য উন্মুখ এবং বরাবরের মতো, প্রতিক্রিয়ার জন্য উন্মুক্ত।

ভিউ ট্রানজিশন সম্পর্কে আপনার কোনো প্রশ্ন থাকলে, সোশ্যাল মিডিয়াতে আমাদের সাথে যোগাযোগ করুন। ভিউ ট্রানজিশনের জন্য ফিচার অনুরোধগুলি CSS WG-তে ফাইল করা যেতে পারে। আপনার যদি কোনো বাগ হয়, আমাদের জানাতে একটি Chromium বাগ ফাইল করুন ।