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

Bramus

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

২০২৩ সালে আমরা যখন একই-ডকুমেন্ট ভিউ ট্রানজিশন চালু করেছিলাম, তখন থেকে অনেক কিছু বদলে গেছে।

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

এই পোস্টে ২০২৫ সালে ভিউ ট্রানজিশনে কী কী পরিবর্তন এসেছে, তার একটি সার্বিক ধারণা দেওয়া হয়েছে।

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

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

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

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

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

সারা বছর ধরে, রিয়্যাক্ট টিম রিয়্যাক্টের কোরে ভিউ ট্রানজিশন যুক্ত করার জন্য কাজ করে আসছে। তারা এপ্রিলে 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> ডক্স দেখতে পারেন অথবা এই বিষয়ে একটি ভালো পরিচিতির জন্য অরোরা শার্ফের এই আলোচনাটি দেখতে পারেন ।

সম্প্রতি পাঠানো ফিচারগুলো

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 ব্যবহার করে।

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

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

নেস্টেড ভিউ ট্রানজিশন গ্রুপ ক্রোম ১৪০ থেকে উপলব্ধ।

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

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

‘নেস্টেড ভিউ ট্রানজিশন গ্রুপ’- এর কল্যাণে এখন আপনি ::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 পর উৎপাদিত ভিজ্যুয়াল ফ্রেমটি ভিউ ট্রানজিশন কাঠামোটি বজায় রাখে, যার ফলে ফ্লিকার এড়ানো যায়।

এই টাইমিং পরিবর্তনটি ক্রোম ১৪০-এ অন্তর্ভুক্ত করা হয়েছে।

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

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

ক্রোম ১৪০-এ স্কোপড ভিউ ট্রানজিশন পরীক্ষার জন্য প্রস্তুত।

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

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

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

chrome://flags এ "Experimental Web Platform features" ফ্ল্যাগটি সক্রিয় করার মাধ্যমে ফিচারটি Chrome 140 থেকে পরীক্ষার জন্য প্রস্তুত। আমরা সক্রিয়ভাবে ডেভেলপারদের মতামতের জন্য অপেক্ষা করছি।

ক্রোম ১৪২-এ ::view-transition এর অবস্থান fixed থেকে absolute পরিবর্তিত হবে।

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

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

document.activeViewTransition ক্রোম ১৪২-এ আসছে

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

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

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

ক্রোম ১৪২ সংস্করণে document.activeViewTransition এর জন্য সমর্থন শীঘ্রই যুক্ত হতে চলেছে।

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

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

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

এই পরিবর্তনটি এই বছরের শেষের দিকে আসছে এবং এর ফলে, উদাহরণস্বরূপ, একটি fetch অ্যালাউ করা যাবে অথবা স্ক্রল-চালিত ভিউ ট্রানজিশনের (scroll-driven view transition ) সহজতর বাস্তবায়ন সম্ভব হবে।

এরপর কী?

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

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