ক্রস-ডকুমেন্ট ট্রানজিশন

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

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

১. ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনে অপ্ট-ইন করুন

ব্রাউজার যাতে নেভিগেশনের সময় ট্রানজিশন ট্রিগার করতে পারে, তার জন্য সোর্স ও ডেস্টিনেশন, দুটি পৃষ্ঠাতেই ভিউ ট্রানজিশন অপ্ট-ইন করতে হবে।

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

২. ট্রানজিশন অ্যানিমেশন কাস্টমাইজ করুন (ঐচ্ছিক)

আপনি স্লাইড বা রিভিলের মতো এফেক্ট তৈরি করতে ছদ্ম-এলিমেন্ট ব্যবহার করে ট্রানজিশনের পুরনো ও নতুন অবস্থাকে টার্গেট করতে পারবেন।

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

৩. দিকনির্দেশক ট্রানজিশন তৈরি করুন (ঐচ্ছিক)

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

আপনি যে পৃষ্ঠায় নেভিগেট করছেন, সেখানে আপনি যেভাবে যান না কেন, যদি সবসময় একই ধরনের ট্রানজিশন হয়, তাহলে আপনি @view-transition নিয়মে types দিয়ে তা উল্লেখ করতে পারেন।

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

এছাড়াও, আপনি pagereveal-এর জন্য ইভেন্ট লিসেনারের মধ্যে শর্তসাপেক্ষে ট্রানজিশনের ধরন নির্দিষ্ট করতে পারবেন।

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

তারপর, প্রতিটি ধরনের জন্য আলাদা আলাদা অ্যানিমেশন প্রয়োগ করতে :active-view-transition-type() সিউডো সিলেক্টর ব্যবহার করুন।

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

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

কোনও ব্রাউজার যদি ভিউ ট্রানজিশন বা ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সাপোর্ট না করে, তাহলে এটি একটি স্ট্যান্ডার্ড ইনস্ট্যান্ট পৃষ্ঠা নেভিগেশন পারফর্ম করবে। ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট; সাইটের মূল কার্যকারিতা প্রভাবিত হয় না।

জাভাস্ক্রিপ্টে সহায়তা চেক করতে:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

কোনও ব্রাউজারে Navigation API কাজ না করলে, ট্রানজিশনের ধরন নির্ধারণ করার জন্য আপনি এটি ব্যবহার করতে পারবেন না। ট্রানজিশনের ধরন নির্ধারণ করার জন্য বিকল্প পদ্ধতি ব্যবহার করুন অথবা ফলব্যাক ট্রানজিশনের ধরন প্রদান করুন। অন্যথায়, ব্রাউজার স্ট্যান্ডার্ড ইনস্ট্যান্ট পৃষ্ঠা নেভিগেশন করবে।

জাভাস্ক্রিপ্টে সহায়তা চেক করতে:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}