একটি ভিউ ট্রানজিশন চলমান অবস্থায় পৃষ্ঠাটি ইন্টারেক্টিভ রাখছে

ভিউ ট্রানজিশনগুলি ব্যবহার করার সময় আপনি লক্ষ্য করবেন যে কোনও ভিউ ট্রানজিশন চলাকালীন পৃষ্ঠাটি ক্লিকগুলির প্রতি প্রতিক্রিয়াহীন হয়ে উঠবে। (…) কারণ এটি ঘটে ::view-transition সিউডো উপাদান – এটিতে সমস্ত অ্যানিমেটেড স্ন্যাপশট রয়েছে – এটি নথির উপরে ওভারলেড হয়ে যায় এবং সমস্ত ক্লিকগুলি ক্যাপচার করে।

::view-transition /* 👈 Captures all the clicks! */
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

কৌশল? এটা যে স্নিগ্ধ সামান্য pointer-events সম্পত্তি! এটি সরাসরি চড় মারছে :view-transition আমাদের সিউডো-এলিমেন্টে “নীচে” ক্লিক করতে দেয়, যার অর্থ ভিউ ট্রানজিশন চলাকালীন পুরো পৃষ্ঠাটি ইন্টারেক্টিভ হয়।

::view-transition {
  pointer-events: none;
}

আমি সবসময়, সর্বদা, সর্বদা ভুলে যাও pointer-eventsতাই এই ছোট্ট স্নিপেট পোস্ট করার জন্য ব্রামাসকে ধন্যবাদ। আমি অপসারণ সম্পর্কে অতিরিক্ত নোটেরও প্রশংসা করি :root ভিউ ট্রানজিশনে অংশ নেওয়া থেকে উপাদান:

:root {
  view-transition-name: none;
}

তিনি উদ্ধৃতি স্পেক স্ন্যাপশটগুলি হিট-টেস্টিংয়ের প্রতিক্রিয়া জানায় না এমন কারণ উল্লেখ করে:

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

সরাসরি লিঙ্ক →