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

Bramus

প্রকাশিত: ১৬ মে, ২০২৪

গুগল আই/ও ২০২৪- এ, আমি ভিউ ট্রানজিশনের পরবর্তী ধাপ ঘোষণা করেছি: মাল্টি-পেজ অ্যাপ্লিকেশনের জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন (এমপিএ)।

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

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

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

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

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

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

তবে, প্রাথমিক বাস্তবায়নের জন্য ভিউ ট্রানজিশন ব্যবহার করার জন্য আপনাকে একটি SPA তৈরি করতে হয়েছিল। Chrome 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-এর জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন পাঠানোর পাশাপাশি, Chrome সাধারণভাবে ভিউ ট্রানজিশনের সাথে কাজ করার ক্ষেত্রে কিছু পরিমার্জনও অন্তর্ভুক্ত করে।

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

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

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

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-rule-এ টাইপ সেট করুন অথবা pageswap এবং pagereveal ইভেন্টে তাৎক্ষণিকভাবে সেট করুন।

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

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

/* 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 বাগ ফাইল করুন ।