ভিউ ট্রানজিশন API সহ মসৃণ রূপান্তর

ব্রামাস

ভিউ ট্রানজিশন API আপনাকে আপনার ওয়েবসাইটের বিভিন্ন ভিউয়ের মধ্যে বিরামহীন ভিজ্যুয়াল ট্রানজিশন তৈরি করার ক্ষমতা দেয়। এটি একটি মাল্টি-পেজ অ্যাপ্লিকেশন (MPA) বা একটি একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA) হিসাবে তৈরি করা হোক না কেন ব্যবহারকারীরা আপনার সাইটে নেভিগেট করার সময় এটি তাদের জন্য একটি দৃশ্যত আকর্ষণীয় ব্যবহারকারীর অভিজ্ঞতা তৈরি করে৷

সাধারণ পরিস্থিতি যেখানে আপনি ভিউ ট্রানজিশন ব্যবহার করবেন তার মধ্যে রয়েছে:

  • একটি পণ্য তালিকা পৃষ্ঠায় একটি থাম্বনেইল চিত্র যা পণ্যের বিশদ পৃষ্ঠায় একটি পূর্ণ আকারের পণ্য চিত্রে রূপান্তরিত হয়৷
  • একটি স্থির নেভিগেশন বার যা আপনি এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় নেভিগেট করার সাথে সাথে অবস্থান করে।
  • আপনি ফিল্টার করার সাথে সাথে আইটেম মুভিং পজিশন সহ একটি গ্রিড।
ভিউ ট্রানজিশন API দিয়ে ট্রানজিশন তৈরি করা হয়েছে। ডেমো সাইট চেষ্টা করুন . Chrome 111 বা তার বেশি প্রয়োজন।

ভিউ ট্রানজিশন বাস্তবায়ন করুন

ভিউ ট্রানজিশনগুলি একটি নির্দিষ্ট অ্যাপ্লিকেশন আর্কিটেকচার বা ফ্রেমওয়ার্কের সাথে আবদ্ধ নয় এবং শুধুমাত্র একটি নথিতে নয় এবং দুটি ভিন্ন নথির মধ্যেও ট্রিগার করা যেতে পারে।

উভয় ধরনের ভিউ ট্রানজিশন একই বিল্ডিং ব্লক এবং নীতির উপর নির্ভর করে:

  1. ব্রাউজারটি পুরানো এবং নতুন রাজ্যের স্ন্যাপশট নেয়।
  2. রেন্ডারিং দমন করার সময় DOM আপডেট হয়।
  3. রূপান্তরগুলি CSS অ্যানিমেশন দ্বারা চালিত হয়।

একটি জিনিস যা উভয় প্রকারের মধ্যে আলাদা তা হল আপনি কীভাবে তাদের ট্রিগার করেন।

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

যখন একটি ভিউ ট্রানজিশন একটি একক নথিতে চলে তখন একে একই-ডকুমেন্ট ভিউ ট্রানজিশন বলে। এটি সাধারণত একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPAs) ক্ষেত্রে হয়। একই-ডকুমেন্ট ভিউ ট্রানজিশনগুলি Chrome 111 থেকে Chrome-এ সমর্থিত।

ব্রাউজার সমর্থন

  • ক্রোম: 111।
  • প্রান্ত: 111।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: 18।

উৎস

কিভাবে ট্রিগার

document.startViewTransition কল করে একই-ডকুমেন্ট ভিউ ট্রানজিশন ট্রিগার করুন :

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

উদাহরণ

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

কার্ড ডেমো রেকর্ডিং. Chrome 111 বা তার বেশি প্রয়োজন।

নির্মাণ শুরু করুন

একই-ডকুমেন্ট ভিউ ট্রানজিশন সম্পর্কে জানতে যা আছে তা জানতে ডেডিকেটেড ডকুমেন্টেশন পৃষ্ঠাটি পড়ুন।

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

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

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

ব্রাউজার সমর্থন

  • ক্রোম: 126।
  • প্রান্ত: 126।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি প্রযুক্তি পূর্বরূপ: সমর্থিত।

কিভাবে ট্রিগার

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

নির্বাচন করতে, নিম্নলিখিত CSS স্নিপেট ব্যবহার করুন:

@view-transition {
  navigation: auto;
}

উদাহরণ

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

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

নির্মাণ শুরু করুন

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন সম্পর্কে যা জানার আছে তা জানুন।

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