এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

বহু-পৃষ্ঠা অ্যাপ্লিকেশনের জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন

Bramus

যখন দুটি ভিন্ন ডকুমেন্টের মধ্যে ভিউ ট্রানজিশন ঘটে তখন তাকে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন বলা হয়। এটি সাধারণত মাল্টি-পেজ অ্যাপ্লিকেশন (MPA) এর ক্ষেত্রে হয়। ক্রোম 126 থেকে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি Chrome-এ সমর্থিত।

Browser Support

Source

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি একই-ডকুমেন্ট ভিউ ট্রানজিশনের মতো একই বিল্ডিং ব্লক এবং নীতির উপর নির্ভর করে, যা খুবই ইচ্ছাকৃত:

ব্রাউজারটি পুরাতন এবং নতুন উভয় পৃষ্ঠায় একটি অনন্য view-transition-name উপাদানগুলির স্ন্যাপশট নেয়।
রেন্ডারিং দমন করার সময় DOM আপডেট হয়।
এবং পরিশেষে, রূপান্তরগুলি CSS অ্যানিমেশন দ্বারা চালিত হয়।

একই-ডকুমেন্ট ভিউ ট্রানজিশনের সাথে তুলনা করলে যা আলাদা তা হল, ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের সাথে ভিউ ট্রানজিশন শুরু করার জন্য আপনাকে document.startViewTransition কল করার প্রয়োজন নেই। পরিবর্তে, ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের ট্রিগার হল এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় একই-অরিজিন নেভিগেশন, একটি ক্রিয়া যা সাধারণত আপনার ওয়েবসাইটের ব্যবহারকারী একটি লিঙ্কে ক্লিক করে সম্পাদন করে।

অন্য কথায়, দুটি ডকুমেন্টের মধ্যে ভিউ ট্রানজিশন শুরু করার জন্য কোনও API কল করার প্রয়োজন নেই। তবে, দুটি শর্ত পূরণ করতে হবে:

উভয় নথি একই উৎস থেকে থাকা আবশ্যক।
ভিউ ট্রানজিশনের অনুমতি দেওয়ার জন্য উভয় পৃষ্ঠাকেই অপ্ট-ইন করতে হবে।

এই দুটি শর্তই এই নথিতে পরে ব্যাখ্যা করা হয়েছে।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি একই-অরিজিন নেভিগেশনের মধ্যে সীমাবদ্ধ।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন শুধুমাত্র একই-অরিজিন নেভিগেশনের মধ্যেই সীমাবদ্ধ। অংশগ্রহণকারী উভয় পৃষ্ঠার উৎপত্তিস্থল একই হলে একটি নেভিগেশনকে একই-অরিজিন বলে মনে করা হয়।

একটি পৃষ্ঠার উৎপত্তি হল ব্যবহৃত স্কিম, হোস্টনেম এবং পোর্টের সংমিশ্রণ, যেমনটি web.dev এ বিস্তারিতভাবে বর্ণনা করা হয়েছে ।

স্কিম, হোস্টনেম এবং পোর্ট হাইলাইট করে একটি উদাহরণ URL। একত্রিত হলে, এগুলি মূল তৈরি করে।

উদাহরণস্বরূপ, developer.chrome.com থেকে developer.chrome.com/blog এ নেভিগেট করার সময় আপনার ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন থাকতে পারে, কারণ এগুলি একই-অরিজিন। developer.chrome.com থেকে www.chrome.com এ নেভিগেট করার সময় আপনার সেই ট্রানজিশন থাকতে পারে না, কারণ এগুলি ক্রস-অরিজিন এবং একই-সাইট।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি অপ্ট-ইন করা হয়েছে

দুটি ডকুমেন্টের মধ্যে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, উভয় অংশগ্রহণকারী পৃষ্ঠাকেই এটির অনুমতি দেওয়ার জন্য অপ্ট-ইন করতে হবে। এটি CSS-এর @view-transition at-rule ব্যবহার করে করা হয়।

@view-transition at-rule-এ, ক্রস-ডকুমেন্ট, একই-অরিজিন নেভিগেশনের জন্য ভিউ ট্রানজিশন সক্ষম করতে navigation বর্ণনাকারীকে auto তে সেট করুন।

@view-transition {
  navigation: auto;
}

navigation বর্ণনাকারীকে auto তে সেট করে আপনি নিম্নলিখিত NavigationType গুলির জন্য ভিউ ট্রানজিশন ঘটতে দেওয়ার জন্য নির্বাচন করছেন:

traverse
যদি ব্যবহারকারী ব্রাউজার UI প্রক্রিয়ার মাধ্যমে সক্রিয়করণ শুরু না করে থাকেন, তাহলে push অথবা replace ।

auto থেকে বাদ দেওয়া নেভিগেশনগুলি হল, উদাহরণস্বরূপ, URL ঠিকানা বার ব্যবহার করে নেভিগেট করা বা বুকমার্কে ক্লিক করা, সেইসাথে ব্যবহারকারী বা স্ক্রিপ্ট দ্বারা শুরু করা যেকোনো ধরণের রিলোড।

যদি কোনও নেভিগেশন খুব বেশি সময় নেয় - Chrome এর ক্ষেত্রে চার সেকেন্ডের বেশি - তাহলে TimeoutError DOMException ব্যবহার করে ভিউ ট্রানজিশনটি এড়িয়ে যায়।

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

স্ট্যাক নেভিগেটর ডেমো তৈরি করতে ভিউ ট্রানজিশন ব্যবহার করে নিচের ডেমোটি দেখুন। এখানে document.startViewTransition() এ কোনও কল নেই, এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় নেভিগেট করার মাধ্যমে ভিউ ট্রানজিশনগুলি ট্রিগার করা হয়।

স্ট্যাক নেভিগেটর ডেমো রেকর্ডিং। Chrome 126+ প্রয়োজন।

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

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন কাস্টমাইজ করতে, কিছু ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য রয়েছে যা আপনি ব্যবহার করতে পারেন।

pageswap এবং pagereveal ইভেন্টগুলি
নেভিগেশন সক্রিয়করণ তথ্য
রেন্ডার ব্লকিং

এই বৈশিষ্ট্যগুলি ভিউ ট্রানজিশন এপিআই স্পেসিফিকেশনের অংশ নয়, তবে এটির সাথে একত্রে ব্যবহারের জন্য ডিজাইন করা হয়েছে।

`pageswap` এবং `pagereveal` ইভেন্টগুলি

Browser Support

Source

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন কাস্টমাইজ করার জন্য, HTML স্পেসিফিকেশনে দুটি নতুন ইভেন্ট অন্তর্ভুক্ত করা হয়েছে যা আপনি ব্যবহার করতে পারেন: pageswap এবং pagereveal ।

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

পৃষ্ঠার শেষ ফ্রেম রেন্ডার হওয়ার আগেই pageswap ইভেন্টটি চালু হয়ে যায়। পুরনো স্ন্যাপশট নেওয়ার ঠিক আগে, বহির্গামী পৃষ্ঠায় শেষ মুহূর্তের কিছু পরিবর্তন করতে আপনি এটি ব্যবহার করতে পারেন।
pagereveal ইভেন্টটি কোনও পৃষ্ঠা শুরু বা পুনঃসক্রিয় করার পরে কিন্তু প্রথম রেন্ডারিং সুযোগের আগে সক্রিয় হয়। এটির সাহায্যে, নতুন স্ন্যাপশট নেওয়ার আগে আপনি নতুন পৃষ্ঠাটি কাস্টমাইজ করতে পারেন।

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

let lastClickX, lastClickY;
document.addEventListener('click', (event) => {
  if (event.target.tagName.toLowerCase() === 'a') return;
  lastClickX = event.clientX;
  lastClickY = event.clientY;
});

// Write position to storage on old page
window.addEventListener('pageswap', (event) => {
  if (event.viewTransition && lastClick) {
    sessionStorage.setItem('lastClickX', lastClickX);
    sessionStorage.setItem('lastClickY', lastClickY);
  }
});

// Read position from storage on new page
window.addEventListener('pagereveal', (event) => {
  if (event.viewTransition) {
    lastClickX = sessionStorage.getItem('lastClickX');
    lastClickY = sessionStorage.getItem('lastClickY');
  }
});

আপনি যদি চান, তাহলে উভয় ইভেন্টেই ট্রানজিশন এড়িয়ে যাওয়ার সিদ্ধান্ত নিতে পারেন।

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    if (goodReasonToSkipTheViewTransition()) {
      e.viewTransition.skipTransition();
    }
  }
}

গুরুত্বপূর্ণ: প্রথম রেন্ডারিং সুযোগের আগে pagereveal ইভেন্ট লিসেনারকে এক্সিকিউট করতে হবে। অতএব, আপনাকে লিসেনারকে <head> এ একটি ক্লাসিক পার্সার-ব্লকিং স্ক্রিপ্টে নিবন্ধন করতে হবে (মডিউল নয়, অ্যাসিঙ্ক নয়, ডিফার নয়) । একটি অ্যাসিঙ্ক্রোনাস স্ক্রিপ্ট ব্যবহার করে - এটি একটি মডিউল হোক বা নিয়মিত <script async> - <head> -এ ব্যবহার করা যেতে পারে তবে আপনাকে <script> ট্যাগে blocking=render যোগ করে ম্যানুয়ালি এটিকে রেন্ডার-ব্লকিং হিসাবে চিহ্নিত করতে হবে।

pageswap এবং pagereveal এ ViewTransition অবজেক্ট দুটি ভিন্ন অবজেক্ট। তারা বিভিন্ন প্রতিশ্রুতি ভিন্নভাবে পরিচালনা করে:

pageswap : ডকুমেন্টটি লুকানো হয়ে গেলে, পুরানো ViewTransition অবজেক্টটি এড়িয়ে যায়। যখন এটি ঘটে, viewTransition.ready প্রত্যাখ্যান করে এবং viewTransition.finished সমাধান করে।
pagereveal : updateCallBack প্রতিশ্রুতি ইতিমধ্যেই এই মুহুর্তে সমাধান করা হয়েছে। আপনি viewTransition.ready এবং viewTransition.finished প্রতিশ্রুতি ব্যবহার করতে পারেন।

Browser Support

Source

pageswap এবং pagereveal উভয় ইভেন্টেই, আপনি পুরাতন এবং নতুন পৃষ্ঠাগুলির URL গুলির উপর ভিত্তি করে পদক্ষেপ নিতে পারেন।

উদাহরণস্বরূপ, MPA স্ট্যাক নেভিগেটরে কোন ধরণের অ্যানিমেশন ব্যবহার করতে হবে তা নেভিগেশন পথের উপর নির্ভর করে:

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

এটি করার জন্য আপনার pageswap এর ক্ষেত্রে যে নেভিগেশনটি ঘটতে চলেছে বা pagereveal এর ক্ষেত্রে সবেমাত্র ঘটেছে সে সম্পর্কে তথ্যের প্রয়োজন।

এর জন্য, ব্রাউজারগুলি এখন NavigationActivation অবজেক্টগুলিকে এক্সপোজ করতে পারে যা একই-অরিজিন নেভিগেশন সম্পর্কে তথ্য ধারণ করে। এই অবজেক্টটি Navigation API থেকে navigation.entries() এ পাওয়া ব্যবহৃত নেভিগেশন টাইপ, বর্তমান এবং চূড়ান্ত গন্তব্য ইতিহাস এন্ট্রিগুলিকে এক্সপোজ করে।

একটি সক্রিয় পৃষ্ঠায়, আপনি navigation.activation এর মাধ্যমে এই বস্তুটি অ্যাক্সেস করতে পারেন। pageswap ইভেন্টে, আপনি e.activation এর মাধ্যমে এটি অ্যাক্সেস করতে পারেন।

এই প্রোফাইল ডেমোটি দেখুন যা pageswap এবং pagereveal ইভেন্টগুলিতে NavigationActivation তথ্য ব্যবহার করে ভিউ ট্রানজিশনে অংশগ্রহণের জন্য প্রয়োজনীয় উপাদানগুলিতে view-transition-name মান সেট করে।

এইভাবে, আপনাকে তালিকার প্রতিটি আইটেমকে আগে থেকেই view-transition-name দিয়ে সাজাতে হবে না। পরিবর্তে, এটি জাভাস্ক্রিপ্ট ব্যবহার করে ঠিক সময়েই ঘটে, শুধুমাত্র সেই উপাদানগুলিতে যার প্রয়োজন।

প্রোফাইল ডেমো রেকর্ডিং। Chrome 126+ প্রয়োজন।

কোডটি নিম্নরূপ:

// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
  if (e.viewTransition) {
    const targetUrl = new URL(e.activation.entry.url);

    // Navigating to a profile page
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the clicked row
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';

      // Remove view-transition-names after snapshots have been taken
      // (this to deal with BFCache)
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
    }
  }
});

// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
  if (e.viewTransition) {
    const fromURL = new URL(navigation.activation.from.url);
    const currentURL = new URL(navigation.activation.entry.url);

    // Navigating from a profile page back to the homepage
    if (isProfilePage(fromURL) && isHomePage(currentURL)) {
      const profile = extractProfileNameFromUrl(currentURL);

      // Set view-transition-name values on the elements in the list
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
    }
  }
});

ভিউ ট্রানজিশন চলার পর view-transition-name মানগুলি সরিয়ে কোডটি নিজেই পরিষ্কার করে। এইভাবে পৃষ্ঠাটি ধারাবাহিক নেভিগেশনের জন্য প্রস্তুত এবং ইতিহাসের ট্রাভার্সালও পরিচালনা করতে পারে।

এটিতে সহায়তা করার জন্য, এই ইউটিলিটি ফাংশনটি ব্যবহার করুন যা অস্থায়ীভাবে view-transition-name s সেট করে।

const setTemporaryViewTransitionNames = async (entries, vtPromise) => {
  for (const [$el, name] of entries) {
    $el.style.viewTransitionName = name;
  }

  await vtPromise;

  for (const [$el, name] of entries) {
    $el.style.viewTransitionName = '';
  }
}

আগের কোডটি এখন নিম্নরূপ সরলীকৃত করা যেতে পারে:

// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
  if (e.viewTransition) {
    const targetUrl = new URL(e.activation.entry.url);

    // Navigating to a profile page
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the clicked row
      // Clean up after the page got replaced
      setTemporaryViewTransitionNames([
        [document.querySelector(`#${profile} span`), 'name'],
        [document.querySelector(`#${profile} img`), 'avatar'],
      ], e.viewTransition.finished);
    }
  }
});

// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
  if (e.viewTransition) {
    const fromURL = new URL(navigation.activation.from.url);
    const currentURL = new URL(navigation.activation.entry.url);

    // Navigating from a profile page back to the homepage
    if (isProfilePage(fromURL) && isHomePage(currentURL)) {
      const profile = extractProfileNameFromUrl(currentURL);

      // Set view-transition-name values on the elements in the list
      // Clean up after the snapshots have been taken
      setTemporaryViewTransitionNames([
        [document.querySelector(`#${profile} span`), 'name'],
        [document.querySelector(`#${profile} img`), 'avatar'],
      ], e.viewTransition.ready);
    }
  }
});

রেন্ডার ব্লকিং সহ কন্টেন্ট লোড হওয়া পর্যন্ত অপেক্ষা করুন।

Browser Support

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

<head> এ, নিম্নলিখিত মেটা ট্যাগ ব্যবহার করে পৃষ্ঠাটির প্রথম রেন্ডার পাওয়ার আগে উপস্থিত থাকা এক বা একাধিক এলিমেন্ট আইডি নির্ধারণ করুন।

<link rel="expect" blocking="render" href="#section1">

এই মেটা ট্যাগের অর্থ হল উপাদানটি DOM-এ উপস্থিত থাকা উচিত, কন্টেন্ট লোড করা উচিত নয়। উদাহরণস্বরূপ, ছবির ক্ষেত্রে, DOM ট্রিতে নির্দিষ্ট id সহ <img> ট্যাগের উপস্থিতিই শর্তটিকে সত্য হিসাবে মূল্যায়ন করার জন্য যথেষ্ট। ছবিটি এখনও লোড হচ্ছে।

রেন্ডার ব্লকিং সম্পর্কে সম্পূর্ণরূপে আলোচনা করার আগে জেনে রাখুন যে ইনক্রিমেন্টাল রেন্ডারিং ওয়েবের একটি মৌলিক দিক, তাই ব্লকিং রেন্ডারিং বেছে নেওয়ার সময় সতর্ক থাকুন। ব্লকিং রেন্ডারিংয়ের প্রভাব কেস বাই কেস ভিত্তিতে মূল্যায়ন করা প্রয়োজন। ডিফল্টরূপে, blocking=render ব্যবহার করা এড়িয়ে চলুন যদি না আপনি সক্রিয়ভাবে আপনার ব্যবহারকারীদের উপর এর প্রভাব পরিমাপ করতে এবং পরিমাপ করতে পারেন, আপনার Core Web Vitals এর উপর প্রভাব পরিমাপ করে।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনে ট্রানজিশনের ধরণ দেখুন

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

উদাহরণস্বরূপ, যখন আপনি একটি পৃষ্ঠার পরবর্তী বা পূর্ববর্তী পৃষ্ঠায় যাবেন, তখন আপনি ক্রম থেকে উপরের পৃষ্ঠায় যাচ্ছেন নাকি নিচের পৃষ্ঠায় যাচ্ছেন তার উপর নির্ভর করে বিভিন্ন অ্যানিমেশন ব্যবহার করতে পারেন।

এই প্রকারগুলি আগে থেকেই সেট করতে, @view-transition at-rule-এ প্রকারগুলি যোগ করুন:

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

টাইপগুলি তাৎক্ষণিকভাবে সেট করতে, e.viewTransition.types এর মান নিয়ন্ত্রণ করতে pageswap এবং pagereveal ইভেন্টগুলি ব্যবহার করুন।

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    const transitionType = determineTransitionType(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

টাইপগুলি স্বয়ংক্রিয়ভাবে পুরানো পৃষ্ঠার ViewTransition অবজেক্ট থেকে নতুন পৃষ্ঠার ViewTransition অবজেক্টে স্থানান্তরিত হয় না। অ্যানিমেশনগুলি প্রত্যাশা অনুযায়ী চালানোর জন্য আপনাকে কমপক্ষে নতুন পৃষ্ঠায় ব্যবহার করার জন্য টাইপ(গুলি) নির্ধারণ করতে হবে।

এই ধরণের প্রতিক্রিয়া জানাতে, একই-ডকুমেন্ট ভিউ ট্রানজিশনের মতো একইভাবে :active-view-transition-type() pseudo-class selector ব্যবহার করুন।

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

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

ডেমো

নিম্নলিখিত পৃষ্ঠাকরণ ডেমোতে , আপনি যে পৃষ্ঠা নম্বরে নেভিগেট করছেন তার উপর ভিত্তি করে পৃষ্ঠার বিষয়বস্তু সামনের দিকে বা পিছনের দিকে স্লাইড করে।

পেজিনেশন ডেমো (MPA) রেকর্ডিং। আপনি কোন পৃষ্ঠায় যাচ্ছেন তার উপর নির্ভর করে এটি বিভিন্ন ট্রানজিশন ব্যবহার করে।

pagereveal এবং pageswap ইভেন্টগুলিতে ইউআরএল থেকে আসা এবং আসা দেখে ট্রানজিশনের ধরণ নির্ধারণ করা হয়।

const determineTransitionType = (fromNavigationEntry, toNavigationEntry) => {
  const currentURL = new URL(fromNavigationEntry.url);
  const destinationURL = new URL(toNavigationEntry.url);

  const currentPathname = currentURL.pathname;
  const destinationPathname = destinationURL.pathname;

  if (currentPathname === destinationPathname) {
    return "reload";
  } else {
    const currentPageIndex = extractPageIndexFromPath(currentPathname);
    const destinationPageIndex = extractPageIndexFromPath(destinationPathname);

    if (currentPageIndex > destinationPageIndex) {
      return 'backwards';
    }
    if (currentPageIndex < destinationPageIndex) {
      return 'forwards';
    }

    return 'unknown';
  }
};

প্রতিক্রিয়া

ডেভেলপারদের মতামত সর্বদাই প্রশংসনীয়। শেয়ার করতে, পরামর্শ এবং প্রশ্ন সহ GitHub-এর CSS ওয়ার্কিং গ্রুপে একটি সমস্যা ফাইল করুন । [css-view-transitions] এর সাথে আপনার সমস্যাটির প্রিফিক্স করুন। যদি আপনি কোনও বাগের সম্মুখীন হন, তাহলে পরিবর্তে একটি Chromium বাগ ফাইল করুন ।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি একই-অরিজিন নেভিগেশনের মধ্যে সীমাবদ্ধ।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি অপ্ট-ইন করা হয়েছে

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

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

pageswap এবং pagereveal ইভেন্টগুলি

নেভিগেশন সক্রিয়করণ তথ্য

রেন্ডার ব্লকিং সহ কন্টেন্ট লোড হওয়া পর্যন্ত অপেক্ষা করুন।

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনে ট্রানজিশনের ধরণ দেখুন

ডেমো

প্রতিক্রিয়া

`pageswap` এবং `pagereveal` ইভেন্টগুলি