পায়ের আঙ্গুলগুলি ভিউ ট্রানজিশনে ডুবানো

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

@view-transition {
  navigation: auto;
}

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

এটি জিমের সাইটে এটি কীভাবে কাজ করে তা আপনি দেখতে পারেন:

এটি নতুন জিনিস চেষ্টা করার জন্য আমি পছন্দ করি এমন নিখুঁত ধরণের টো-ডুবানো পরীক্ষা। এবং এটি একই সামান্য দিয়ে শুরু হয় @view-transition স্নিপেট যা উভয় পৃষ্ঠাগুলি ভিউ ট্রানজিশন এপিআইতে বেছে নিতে ব্যবহৃত হয়: আমরা যে পৃষ্ঠায় আছি এবং যে পৃষ্ঠায় আমরা নেভিগেট করছি। এখান থেকে, আমরা তাদের যথাক্রমে “নতুন” পৃষ্ঠা এবং “পুরাতন” পৃষ্ঠা হিসাবে ভাবতে পারি।

আমি আমার ব্যক্তিগত ব্লগে একই প্রভাব পেতে সক্ষম হয়েছি:

একটি ব্লগের জন্য নিখুঁত সামান্য অনুশীলন, তাই না? এটি সেট করে শুরু হয় view-transition-name উপাদানগুলিতে আমরা রূপান্তরটিতে অংশ নিতে চাই যা এই ক্ষেত্রে, “পুরাতন” পৃষ্ঠায় পোস্ট শিরোনাম এবং “নতুন” পৃষ্ঠায় পোস্ট শিরোনাম।

সুতরাং, যদি এটি আমাদের মার্কআপ হয়:

<h1 class="post-title">Notes</h1>
<a class="post-link" href="https://css-tricks.com/link-to-post"></a>

… আমরা তাদের একই দিতে পারি view-transition-name সিএসএসে:

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

ডেভ তাড়াতাড়ি উল্লেখ করে যে আমরা নিশ্চিত করতে পারি যে আমরা ব্যবহারকারীদের যারা হ্রাস গতি পছন্দ করেন তাদের সম্মান করি এবং কেবলমাত্র তাদের সিস্টেমের পছন্দগুলি গতির জন্য অনুমতি দিলে এটি প্রয়োগ করুন:

@media not (prefers-reduced-motion: reduce) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

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

এবং আছে। বা, কমপক্ষে সেখানে থাকবে। এটি এখনও স্ট্যান্ডার্ড নয়। ব্রামাস, আসলে, খুব সম্প্রতি এটি সম্পর্কে লিখেছিলেন উপর ক্রোমের কাজ নিয়ে আলোচনা attr() ফাংশন যা একক ঘোষণায় অনন্য শনাক্তকারীদের একটি সিরিজ তৈরি করতে সক্ষম হবে। ভবিষ্যত থেকে এই সিএসএস দেখুন:

<style>
  .card(id) {
    view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
    view-transition-class: card;
  }
</style>

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

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

পোস্টের শিরোনামটি আমার স্বতন্ত্র ব্লগ পোস্টগুলির জন্য টেমপ্লেটে রয়েছে। এটাই single.php ওয়ার্ডপ্রেস পার্লেন্সে ফাইল।

<?php the_title( 
  '<h1 class="post-single__title" style="view-transition-name: post-' . get_the_id() . '">', '</h1>'
); ?>

পোস্ট লিঙ্কগুলি পোস্ট সংরক্ষণাগারগুলির জন্য টেমপ্লেটে রয়েছে। এটা সাধারণত archive.php ওয়ার্ডপ্রেসে:

<?php the_title(
  '<h2 class="post-link><a href="' . esc_url( get_permalink() ) .'" rel="bookmark" style="view-transition-name: post-' . get_the_id() . '">', '</a></h2>' 
); ?>

দেখুন সেখানে কি হচ্ছে? দ্য view-transition-name ওয়ার্ডপ্রেসে পোস্টের নির্ধারিত আইডির উপর ভিত্তি করে নামটি তৈরি করতে পিএইচপি ব্যবহার করে সরাসরি উভয় রূপান্তর উপাদানগুলিতে সম্পত্তি সেট করা হয়। এটি করার আরেকটি উপায় হ’ল একটি ড্রপ <style> টেমপ্লেটে ট্যাগ করুন এবং সেখানে যুক্তিটি প্লপ করুন। উভয় কি তুলনায় সমানভাবে আইকি attr() ভবিষ্যতে করতে সক্ষম হবে, তাই আপনার বিষটি বেছে নিন।

গুরুত্বপূর্ণ বিষয়টি হ’ল এখন উভয় উপাদানই একই ভাগ view-transition-name এবং যে আমরা ইতিমধ্যে এটি বেছে নিয়েছি @view-transition। এই দুটি উপাদান জায়গায়, ট্রানজিশন কাজ করে! আমাদের এমনকি সংজ্ঞায়িত করার দরকার নেই @keyframes (তবে আপনি সম্পূর্ণরূপে পারেন) কারণ ডিফল্ট ট্রানজিশনটি সমস্ত ভারী উত্তোলন করে।

একই টো-ডুবানো স্পিরিটে, আমি সর্বশেষতম সমস্যাটি ধরলাম আধুনিক ওয়েব সাপ্তাহিক এবং রেডিও ইনপুটগুলিতে ভিউ ট্রানজিশনের এই ছোট্ট ছিটিয়ে পছন্দ করুন:

ইনপুটটি পরীক্ষা করার আগে ট্রানজিশনটি চালানোর অনুমতি দেওয়ার জন্য রেডিওর ডিফল্ট ক্লিক করার আচরণ রোধ করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্টটি লক্ষ্য করুন।