দিকনির্দেশক নেভিগেশন ট্রানজিশন

সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) নতুন পৃষ্ঠায় নেভিগেট না করেই পৃষ্ঠার কন্টেন্ট পরিবর্তন করে নেভিগেশনের মতো অভিজ্ঞতা প্রদান করে। ডিফল্ট হিসেবে, কন্টেন্ট কোনও ট্রানজিশন ছাড়াই শুধু পরিবর্তন করা হয়। দিকনির্দেশক ট্রানজিশন ভিউয়ের মধ্যে স্থানিক সম্পর্ককে ভিজ্যুয়ালি আরও শক্তিশালী করতে পারে।

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

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

1. নেভিগেশনের দিক শনাক্ত করা: অ্যাপ্লিকেশন ফ্লোতে ব্যবহারকারী "সামনে" নাকি "পিছনে" যাচ্ছেন তা নির্ধারণ করুন। আপনি কীভাবে দিক শনাক্ত করবেন তা আপনার ব্যবহারের ক্ষেত্রের উপর নির্ভর করে।
2. টাইপ সহ ট্রানজিশন ট্রিগার করা: ট্রানজিশন বিভাগ অনুযায়ী সাজাতে document.startViewTransition()-এ types অ্যারেতে দিকনির্দেশ পাস করুন।
3. CSS-এর মাধ্যমে ডিরেকশনাল অ্যানিমেশন নির্ধারণ করা: নেভিগেশনের ধরনের উপর ভিত্তি করে নির্দিষ্ট অ্যানিমেশন প্রয়োগ করতে :active-view-transition-type() ছদ্ম-ক্লাস ব্যবহার করুন।

কীফ্রেম নির্ধারণ করা

প্রতিটি দিক থেকে এবং প্রতিটি দিকে স্লাইডিং অ্যানিমেশন নির্ধারণ করুন। সেরা পারফর্ম্যান্সের জন্য, transform প্রপার্টি বা স্বতন্ত্র ট্রান্সফর্ম প্রপার্টি, scale, rotate এবং translate ব্যবহার করে অ্যানিমেট পজিশন পরিবর্তন করুন। opacity সাধারণত ভাল পারফর্ম করে, তবে অন্যান্য CSS প্রপার্টি অ্যানিমেট করার আগে সেগুলি লেআউট বা পেইন্টিং ট্রিগার করে না তা যাচাই করে নিন।

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

শেয়ার করা অ্যানিমেশন সেটিংস সেট-আপ করুন

সব ট্রানজিশন জুড়ে শেয়ার করা অ্যানিমেশন সেটিংস প্রয়োগ করতে ::view-transition-group(root) সিলেক্টর ব্যবহার করুন।

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

দিকনির্দেশক অ্যানিমেশন প্রয়োগ করা হচ্ছে

"ফরওয়ার্ড" বা "ব্যাকওয়ার্ড" টাইপ অ্যাক্টিভ থাকলে, ট্রানজিশন ভিউকে নির্দিষ্টভাবে টার্গেট করতে active-view-transition-type সিউডো-ক্লাস ব্যবহার করুন।

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

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

নেভিগেট করার সময়, startViewTransition পদ্ধতিতে উপযুক্ত ধরন পাস করুন।

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

অ্যাক্সেসিবিলিটি

অ্যানিমেশন বন্ধ বা সরল করে, কম মোশনের জন্য ব্যবহারকারীর পছন্দকে সবসময় সম্মান করুন।

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

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

View Transitions API হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে কাজ করে না, সেখানে document.startViewTransition-এর পরিবর্তে undefined হবে। এই হেল্পার ফাংশনে যেমন দেখানো হয়েছে, অ্যানিমেশন ছাড়াই DOM আপডেট যাতে অবিলম্বে হয় তা নিশ্চিত করতে, আপনাকে ফিচার শনাক্তকরণ চেকে আপনার নেভিগেশন লজিক র‍্যাপ করতে হবে।

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}