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

ব্রামাস

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

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

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

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

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

উভয় ধরণের দৃষ্টিভঙ্গির পরিবর্তন একই মূলনীতি এবং নীতির উপর নির্ভর করে:

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

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

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

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

Browser Support

  • ক্রোম: ১১১।
  • প্রান্ত: ১১১।
  • ফায়ারফক্স: ১৪৪।
  • সাফারি: ১৮টি।

Source

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

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());
}

উদাহরণ

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

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

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

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

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

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

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

Browser Support

  • ক্রোম: ১২৬।
  • প্রান্ত: ১২৬।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: ১৮.২।

Source

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

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

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

@view-transition {
  navigation: auto;
}

উদাহরণ

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

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

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

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

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