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

Bramus

প্রকাশিত: ০৮ অক্টোবর, ২০২৫

২০২৩ সালে একই-ডকুমেন্ট ভিউ ট্রানজিশন পাঠানোর পর থেকে অনেক কিছু বদলে গেছে।

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

এই পোস্টটি আপনাকে ২০২৫ সালে ভিউ ট্রানজিশনের ক্ষেত্রে কী পরিবর্তন এসেছে তার একটি সারসংক্ষেপ দেবে।

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

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

ইন্টারপ ২০২৫ এর একটি ফোকাস এরিয়া হল ভিউ ট্রানজিশন এপিআই, বিশেষ করে document.startViewTransition(updateCallback) , view-transition-class , view-transition-name: match-element সহ অটো-নামকরণ এবং :active-view-transition transition সিএসএস সিলেক্টর সহ একই-ডকুমেন্ট ভিউ ট্রানজিশন।

ফায়ারফক্স আসন্ন ফায়ারফক্স ১৪৪ রিলিজে এই বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে চায়, যা ১৪ অক্টোবর, ২০২৫ তারিখে স্থিতিশীল হবে। এর ফলে এই বৈশিষ্ট্যগুলি বেসলাইন নিউলি উপলব্ধ হবে।

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

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

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

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

বিস্তারিত জানতে আপনি React এর <ViewTransition> ডকুমেন্টস দেখতে পারেন অথবা এই বিষয়ের উপর ভালোভাবে পরিচিতি পেতে Aurora Scharff এর এই আলোচনাটি দেখতে পারেন ।

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

view-transition-name: match-element

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

তবে, অনেক উপাদান পরিবর্তন না করলে, অনন্যভাবে নামকরণ করা জটিল হয়ে উঠতে পারে। যদি আপনার তালিকায় ১০০টি উপাদান স্থানান্তরিত হয়, তাহলে আপনাকে ১০০টি অনন্য নাম তৈরি করতে হবে।

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 সিউডো-এলিমেন্টের অধীনে ভাইবোন।

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

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

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

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

যখন আপনি একটি ::view-transition-group(…) ছদ্মবেশে animation-* longhand বৈশিষ্ট্যগুলির একটি সেট করেন, তখন অন্তর্ভুক্ত ::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;
}

ক্রোম ১৪০-তে আরও বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া ছদ্ম-উপাদানগুলি পাঠানো হয়েছে।

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 পরিবর্তন - যা ক্রোম ১৪২-তে আসছে - দৃশ্যত পর্যবেক্ষণযোগ্য নয় কারণ ::view-transition সিউডোর কন্টেনিং ব্লকটি যাইহোক স্ন্যাপশট কন্টেনিং ব্লক। getComputedStyle করার সময় একমাত্র পর্যবেক্ষণযোগ্য প্রভাব হল একটি ভিন্ন position ভ্যালু।

document.activeViewTransition Chrome 142 এ আসছে

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

এই ইনস্ট্যান্সটি ম্যানুয়ালি ট্র্যাক করার পরিবর্তে, Chrome এখন একটি document.activeViewTransition প্রপার্টি প্রদান করে যা এই অবজেক্টটিকে প্রতিনিধিত্ব করে। যদি কোনও ট্রানজিশন চলমান না থাকে, তাহলে এর মান null হবে।

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

Chrome 142-এ document.activeViewTransition এর সাপোর্ট আসতে চলেছে।

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

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

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

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

এরপর কি?

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

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