ভিউ ট্রানজিশনে নতুন কি? (Google I/O 2024 আপডেট)

Bramus

প্রকাশিত: 16 মে, 2024

Google I/O 2024 এ, আমি ভিউ ট্রানজিশনের জন্য পরবর্তী ধাপ ঘোষণা করেছি: মাল্টি-পেজ অ্যাপ্লিকেশনের (MPA) জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন।

এর উপরে, আমি কিছু উন্নতি শেয়ার করেছি যা আপনাকে সাধারণভাবে ভিউ ট্রানজিশনের সাথে আরও সহজে কাজ করতে দেয়।

• view-transition-class সহ ভিউ ট্রানজিশন সিউডো-এলিমেন্টের মধ্যে অ্যানিমেশন শৈলী শেয়ার করা।
• সক্রিয় প্রকারের সাথে নির্বাচনী ভিউ ট্রানজিশন।

এই উন্নতিগুলি একক-পৃষ্ঠা অ্যাপ্লিকেশনের (SPA) জন্য একই-ডকুমেন্ট ভিউ ট্রানজিশন এবং MPA-এর জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন উভয় ক্ষেত্রেই প্রযোজ্য।

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

Chrome 111-এ, Chrome টিম একক-পৃষ্ঠা অ্যাপ্লিকেশনগুলির জন্য একই-ডকুমেন্ট ভিউ ট্রানজিশন পাঠিয়েছে, ওয়েব বিল্ডিং সম্প্রদায়ের মধ্যে একটি ভাল প্রাপ্ত বৈশিষ্ট্য।

আপনার মধ্যে অনেকেই ভিউ ট্রানজিশনের মাধ্যমে কী তৈরি করেছেন তা দেখে দারুণ লাগছে। সাধারণ বাস্তবায়ন যা "থাম্বনেলটিকে বড় ফটোতে পরিণত করে" থেকে শুরু করে উচ্চ কাস্টমাইজড নিমগ্ন অভিজ্ঞতা যেমন Airbnb এর থেকে। আশ্চর্যজনক!

যাইহোক, প্রাথমিক বাস্তবায়নের জন্য ভিউ ট্রানজিশন ব্যবহার করার জন্য আপনাকে একটি SPA তৈরি করতে হবে। ক্রোম 126-এর হিসাবে এটি আর হয় না, একই-অরিজিন নেভিগেশনের জন্য ভিউ ট্রানজিশন এখন ডিফল্টরূপে সক্ষম করা হয়েছে। আপনি এখন একই-অরিজিন দুটি ভিন্ন নথির মধ্যে একটি ভিউ ট্রানজিশন তৈরি করতে পারেন।

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

@view-transition {
  navigation: auto;
}

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন একই-ডকুমেন্ট ভিউ ট্রানজিশন হিসাবে একই বিল্ডিং ব্লক এবং নীতিগুলি ব্যবহার করে। একটি view-transition-name প্রয়োগ করা উপাদানগুলি ক্যাপচার করা হয় এবং আপনি CSS অ্যানিমেশন ব্যবহার করে অ্যানিমেশনগুলি কাস্টমাইজ করতে পারেন৷

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

• পুরোনো স্ন্যাপশট নেওয়ার ঠিক আগে pageswap এর মাধ্যমে আপনি আউটগোয়িং পেজে কিছু শেষ মুহূর্তের পরিবর্তন করতে পারেন।
• pagereveal মাধ্যমে আপনি নতুন পৃষ্ঠাটি শুরু হওয়ার পরে রেন্ডার শুরু হওয়ার আগে কাস্টমাইজ করতে পারেন।

উভয় ইভেন্টেই আপনার কাছে একটি NavigationActivation অবজেক্টে অ্যাক্সেস রয়েছে যাতে পুরানো এবং নতুন গন্তব্য ইতিহাসের এন্ট্রি বা নেভিগেশন প্রকারের উপর ভিত্তি করে ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন কাস্টমাইজ করা যায় ।

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

ডেমো

এই স্ট্যাক নেভিগেটর ডেমো এই সমস্ত বৈশিষ্ট্যগুলিকে একত্রিত করে (কিছু উন্নতি সহ)।

এটি ক্রস-ডকুমেন্ট নেভিগেশন সহ একটি MPA, একই মূলে হোস্ট করা হয়েছে৷ pagereveal ব্যবহার করে, পুরানো এবং নতুন গন্তব্য ইতিহাসের এন্ট্রির উপর ভিত্তি করে অ্যানিমেশনের ধরন নির্ধারণ করা হয়।

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

ডকুমেন্টেশন পড়ুন

ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনগুলি কীভাবে সক্রিয় এবং কাস্টমাইজ করবেন সে সম্পর্কে আরও তথ্যের জন্য, আমাদের ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন ডকুমেন্টেশন দেখুন।

পরিবর্তনের উন্নতি দেখুন

MPA-এর জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন শিপিং করার পাশাপাশি, ক্রোম সাধারণভাবে ভিউ ট্রানজিশনের সাথে কাজ করার জন্য কিছু পরিমার্জনও অন্তর্ভুক্ত করে।

এই উন্নতিগুলি SPA-এর জন্য একই-ডকুমেন্ট ভিউ ট্রানজিশন এবং MPA-এর জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন উভয় ক্ষেত্রেই প্রযোজ্য।

view-transition-class সাথে অ্যানিমেশন শৈলী শেয়ার করুন

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

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

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

নিম্নলিখিত কার্ডের উদাহরণ একটি নির্বাচক ব্যবহার করে অনেক স্ন্যাপশটে একই অ্যানিমেশন সময় প্রয়োগ করতে view-transition-class ব্যবহার করে।

view-transition-class সম্পর্কে আরও জানতে, view-transition-class উপর উৎসর্গীকৃত ডকুমেন্টেশন পড়ুন ।

সক্রিয় প্রকারের সাথে নির্বাচনী ভিউ ট্রানজিশন

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

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

সক্রিয় প্রকারের আগে, আপনি DOM-এ ক্লাস যোগ করতে পারেন এবং আপনার CSS-এ সেই ক্লাসগুলিতে প্রতিক্রিয়া জানাতে পারেন। যাইহোক, রূপান্তর সম্পূর্ণ হওয়ার পরে আপনাকে পরিষ্কার করতে হবে।

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

একই-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, types startViewTransition পদ্ধতিতে পাস করুন যা এখন একটি অবজেক্ট গ্রহণ করে। update হল কলব্যাক ফাংশন যা DOM আপডেট করে এবং types হল স্ট্রিংগুলির একটি ক্রম।

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

একটি ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য, types বর্ণনাকারী ব্যবহার করে @view-transition at-রুলে প্রকারগুলি সেট করুন বা pageswap এবং pagereveal ইভেন্টগুলিতে ফ্লাইতে সেট করুন৷

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

টাইপ সেটের মাধ্যমে, আপনি আপনার CSS-এ এই ধরনের প্রতিক্রিয়া জানাতে পারেন :active-view-transition-type() এবং :active-view-transition pseudo-class সিলেক্টর যা ভিউ ট্রানজিশন রুটে প্রযোজ্য।

/* 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;
  }
}

ভিউ ট্রানজিশনের ধরন সম্পর্কে আরও জানতে একই-ডকুমেন্ট ভিউ ট্রানজিশন এবং ক্রস-ডকুমেন্ট ভিউ ট্রানজিশনের জন্য ডেডিকেটেড ডকুমেন্টেশন পড়ুন।

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

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

আপনি একটি বাগ চালাতে হবে, তারপর পরিবর্তে একটি Chromium বাগ ফাইল করুন .