গ্রুপ এলিমেন্ট ট্রানজিশন

কোনও তালিকা থেকে আইটেম যোগ করা বা সরানো অথবা নতুন করে সাজানোর সময়, ট্রানজিশন ব্যবহারকারীদের প্রসঙ্গ বুঝতে সাহায্য করতে পারে। ভিউ ট্রানজিশন, কোনও এলিমেন্টকে অনন্য view-transition-name দেওয়ার মাধ্যমে, এলিমেন্টের দুটি অবস্থার মধ্যে ট্রানজিশন করার উপায় প্রদান করে। কোনও পৃষ্ঠার একাধিক এলিমেন্ট একই ট্রানজিশন আচরণ শেয়ার করলে, view-transition-class আপনাকে প্রতিটি অনন্য view-transition-name-এর জন্য এটি পুনরাবৃত্তি করার পরিবর্তে CSS-এ একবার সেই লজিক সংজ্ঞায়িত করার অনুমতি দেয়। এটি আপনার স্টাইলশিটকে রক্ষণাবেক্ষণযোগ্য রাখে এবং একই সাথে এলিমেন্টের গ্রুপ জুড়ে সামঞ্জস্যপূর্ণ অ্যানিমেশন নিশ্চিত করে।

প্রয়োগ করার বিভিন্ন ধাপ

1. অনন্য নাম ও শেয়ার করা ক্লাস অ্যাসাইন করুন

   ট্রানজিশনের সময় প্রতিটি এলিমেন্ট আলাদাভাবে ট্র্যাক করতে হলে, সেটির একটি অনন্য view-transition-name থাকতে হবে।

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   শেয়ার করা স্টাইল প্রয়োগ করতে, একটি view-transition-class-ও অ্যাসাইন করুন।

   .item {
     view-transition-class: list-item;
   }
   

2. শেয়ার করা ট্রানজিশন লজিক নির্ধারণ করা

   সেই গ্রুপের সব মেম্বারের উপর স্টাইল প্রয়োগ করতে ক্লাস সিলেক্টরের সাথে ::view-transition-group() ছদ্ম-এলিমেন্ট ব্যবহার করুন।

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. ঐচ্ছিক: এন্ট্রি ও এক্সিট অ্যানিমেশন নির্দিষ্ট করুন

   যোগ করা বা সরিয়ে দেওয়া এলিমেন্টে নির্দিষ্ট ট্রানজিশন যোগ করতে :only-child সিলেক্টর ব্যবহার করুন। ::view-transition-new() এবং ::view-transition-old() ছদ্ম-এলিমেন্ট হল ::view-transition-image-pair() ছদ্ম-এলিমেন্টের চাইল্ড, তাই এটি একমাত্র চাইল্ড হলে আমরা নির্ধারণ করতে পারি যে এটি যোগ করা বা সরানো এলিমেন্ট কিনা।

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

4. ট্রানজিশন ট্রিগার করা

   document.startViewTransition()-এ DOM আপডেট র‍্যাপ করুন। ব্রাউজার পুরনো স্টেট ক্যাপচার করবে, আপডেট করবে এবং তারপর নতুন স্টেটে অ্যানিমেট করবে।

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. ট্রানজিশন না হওয়া এলিমেন্টের ইন্টার‍্যাক্টিভিটি বজায় রাখা

DOM এলিমেন্টের স্ন্যাপশট ওভারলে করে এবং তারপর স্ন্যাপশট ট্রানজিশন করে ভিউ ট্রানজিশন কাজ করে। এর অর্থ হল, ট্রানজিশনের সময় এলিমেন্ট ইন্টার‍্যাক্টিভ থাকে না। ইন্টারঅ্যাক্টিভ এলিমেন্ট ট্রানজিশন না করা হলে, ভিউ ট্রানজিশনে টাচ ইভেন্ট বন্ধ করে আপনি সেগুলিকে ইন্টারঅ্যাক্টিভ করতে পারেন।

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

এছাড়াও, ডিফল্ট হিসেবে, :root এলিমেন্টে root নামের একটি ভিউ ট্রানজিশন আছে, যা ডিফল্ট ফুল-পেজ ট্রানজিশন চালু করে। রুট এলিমেন্টে কোনও পরিবর্তন না হলে, এটি দুটি অভিন্ন স্ন্যাপশটের মধ্যে ট্রানজিশন হবে, যা ইন্টার‍্যাক্টিভ নয়। আমরা যেহেতু শুধু নির্দিষ্ট এলিমেন্ট ট্রানজিশন করছি, পুরো স্ক্রিন নয়, তাই আমরা root ট্রানজিশন বন্ধ করতে পারি।

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

ফলব্যাক স্ট্র্যাটেজি

ভিউ ট্রানজিশন হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। ব্রাউজার document.startViewTransition সাপোর্ট না করলেও, DOM আপডেট অবিলম্বে হওয়া উচিত, যাতে অ্যানিমেশন না থাকলেও ফাংশনাল অভিজ্ঞতা প্রদান করা যায়।

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

CSS-এর ক্ষেত্রে, যেসব ব্রাউজার view-transition-class বা ::view-transition-group() ক্লাস সিলেক্টর শনাক্ত করতে পারে না, সেগুলি এইসব নিয়মকে উপেক্ষা করবে এবং কোনও অ্যানিমেশন প্রয়োগ করা হবে না।