ভিউ ট্রানজিশন সম্পর্কে ভুল ধারণা

ব্রামাস

ভিউ ট্রানজিশন এপিআই একটি ওয়েব ডেভেলপমেন্ট গেম চেঞ্জার। আপনার ওয়েবসাইট একক বা বহু-পৃষ্ঠা হোক না কেন, এই শক্তিশালী API আপনাকে ভিউগুলির মধ্যে নিরবচ্ছিন্ন রূপান্তর তৈরি করতে দেয়, ফলে নেটিভ-এর মতো অভিজ্ঞতা যা ব্যবহারকারীদের মোহিত করে। বর্তমানে Chrome-এ উপলব্ধ, একই ডকুমেন্ট ভিউ ট্রানজিশন সহ শীঘ্রই Safari-এ উপলব্ধ হবে৷

আরও বেশি সংখ্যক লোক ভিউ ট্রানজিশন API এর দিকে নজর দিতে শুরু করার সাথে সাথে, কিছু ভুল ধারণা দূর করার সময় এসেছে।

ভুল ধারণা 1: ভিউ ট্রানজিশন API স্ক্রিনশট নেয়

একটি ভিউ ট্রানজিশন চালানোর সময়, API কন্টেন্টের পুরানো এবং নতুন অবস্থার স্ন্যাপশট নেয়। এই স্ন্যাপশটগুলি তখন অ্যানিমেটেড হয়ে যায়, যেমনটি বিস্তারিতভাবে "এই রূপান্তরগুলি কীভাবে কাজ করে" - ডকুমেন্টেশনের বিভাগে ।

যদিও আপনি পুরানো স্ন্যাপশটের জন্য স্ক্রিনশট শব্দটি ব্যবহার করতে পারেন, নতুন স্ন্যাপশটটি একটি স্ক্রিনশট নয় কিন্তু আসলে নোডের একটি লাইভ উপস্থাপনা। এটি একটি প্রতিস্থাপিত উপাদান হিসাবে চিন্তা করুন.

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root) 👈 Screenshot
      └─ ::view-transition-new(root) 👈 Live representation

এই লাইভ দৃষ্টিভঙ্গির জন্য ধন্যবাদ, এই ধরনের ডেমোগুলি কাজ করে: ভিডিওটি–নতুন স্ন্যাপশট থেকে নেওয়া–ভিউ ট্রানজিশন চলাকালীন প্লে করা থাকে৷

একটি ভিউ ট্রানজিশন মিনিমাল ডেমোতে অংশগ্রহণকারী একটি প্লে ভিডিও। উৎস ।

এর জন্য ব্যবহৃত লজিক এবং CSS আমাদের ডকুমেন্টেশনে বিস্তারিত আছে।

ভুল ধারণা 2: একাধিক উপাদান ক্যাপচার করার ফলে একাধিক ভিউ ট্রানজিশন চলছে

আপনি যখন একাধিক উপাদান ক্যাপচার করেন, স্ন্যাপশট করার প্রক্রিয়াটি সমস্ত পুরানো এবং নতুন অবস্থা ক্যাপচার করবে। আপনি যখন :root উপাদান ছাড়াও একটি .box ক্যাপচার করেন, তখন আপনি এই ছদ্ম গাছটি পাবেন:

::view-transition
└─ ::view-transition-group(root)
|  └─ ::view-transition-image-pair(root)
|     ├─ ::view-transition-old(root)
|     └─ ::view-transition-new(root)
└─ ::view-transition-group(box)
   └─ ::view-transition-image-pair(box)
      ├─ ::view-transition-old(box)
      └─ ::view-transition-new(box)

যদিও এই গাছটিতে একাধিক স্ন্যাপশট জোড়া রয়েছে শুধুমাত্র একটি একক ভিউ ট্রানজিশন চালানো হয়।

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

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

অনেক ডেভেলপার উদ্বিগ্ন যে তারা ভিউ ট্রানজিশন বাস্তবায়ন করতে পারবে না কারণ এটি শুধুমাত্র Chrome এ সমর্থিত। এখানে কিছু ভাল খবর হল যে সাফারি এটিতে কাজ করছে এবং এটি আসন্ন সাফারি 18 রিলিজে অন্তর্ভুক্ত করবে।

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

function handleClick(e) {
    // Fallback for browsers that don't support this API:
    if (!document.startViewTransition) {
        updateTheDOMSomehow();
        return;
    }

    // With a View Transition:
    document.startViewTransition(() => updateTheDOMSomehow());
}

যদি আপনার ব্রাউজার একই-ডকুমেন্ট ভিউ ট্রানজিশন সমর্থন করে তাহলে আপনি সমৃদ্ধ, অ্যানিমেটেড, সংস্করণ পাবেন। যদি আপনার ব্রাউজার না করে তাহলে আপনি বর্তমান অভিজ্ঞতা পাবেন। সময়ের সাথে সাথে, যত বেশি ব্রাউজার ভিউ ট্রানজিশন সমর্থন করে, তত বেশি ব্যবহারকারী এই সমৃদ্ধ সংস্করণটি স্বয়ংক্রিয়ভাবে উপভোগ করতে পারবেন।

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

এই পদ্ধতিটি ইকমার্সে সফলভাবে প্রয়োগ করা হয়েছে, যেমন এই কেস স্টাডিতে বিস্তারিত বলা হয়েছে

ভুল ধারণা 4: দেখুন ট্রানজিশনগুলি ক্রমবর্ধমান রেন্ডারিংকে ভেঙে দেয়

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

ব্রাউজাররা একটি পৃষ্ঠা রেন্ডার করা শুরু করে যখন তাদের কাছে "পর্যাপ্ত" সামগ্রী থাকে। এটি–অধিকাংশ ব্রাউজারে– <head> -এ সমস্ত স্টাইলশীট লোড করার পরে, <head> এ সমস্ত রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট পার্স করার পরে এবং পর্যাপ্ত মার্কআপ লোড করার পরে। ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন এটি পরিবর্তন করে না: ফার্স্ট কনটেন্টফুল পেইন্টের জন্য প্রয়োজনীয় বিষয়বস্তু অপরিবর্তিত। এই প্রথম রেন্ডারের পরে, ব্রাউজার নতুন প্রাপ্ত সামগ্রীকে ক্রমবর্ধমানভাবে রেন্ডার করতে পারে–এবং করবে৷

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

এটি করতে, এই লিঙ্ক ট্যাগ ব্যবহার করুন:

<link rel="expect" blocking="render" href="#elementId">

এটি ব্রাউজারের প্রথম রেন্ডারটি কখন সম্পাদন করতে হবে তা নির্ধারণ করতে ব্যবহৃত ব্রাউজারের হিউরিস্টিকগুলিকে ওভাররাইড করে: নির্দিষ্ট উপাদানটি DOM ট্রিতে উপস্থিত না হওয়া পর্যন্ত প্রথম রেন্ডারটি বিলম্বিত হয়৷

এই ম্যানুয়াল ব্লকিং-এ কিছু সুরক্ষা ব্যবস্থা অন্তর্নির্মিত রয়েছে৷ উদাহরণস্বরূপ, যখন ক্লোজিং </html> ট্যাগ দেখা যায় কিন্তু ব্লকিং উপাদানটি ছিল না, রেন্ডারিং আর ব্লক করা হবে না৷ উপরন্তু, আপনি আপনার নিজস্ব টাইমআউট লজিক যোগ করতে পারেন যা যেকোনো সময়ে ব্লকিং অ্যাট্রিবিউট সরিয়ে দেয়।

এটা স্পষ্ট যে রেন্ডার ব্লকিং সতর্কতার সাথে ব্যবহার করা উচিত। রেন্ডারিং ব্লক করার প্রভাব কেস বাই কেস ভিত্তিতে মূল্যায়ন করা দরকার। ডিফল্টরূপে, blocking=render ব্যবহার করা এড়িয়ে চলুন যদি না আপনি সক্রিয়ভাবে পরিমাপ করতে পারেন এবং আপনার ব্যবহারকারীদের উপর প্রভাব পরিমাপ করতে পারেন, আপনার কর্মক্ষমতা মেট্রিক্সে প্রভাব পরিমাপ করে।

ভুল ধারণা 5: স্ন্যাপশট করার প্রক্রিয়া ধীর বা ব্যয়বহুল

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

উপরন্তু, স্ন্যাপশটগুলির জন্য ডেটা সরাসরি কম্পোজিটর থেকে নেওয়া হয়, তাই স্ন্যাপশট ডেটা পাওয়ার জন্য কোনও অতিরিক্ত লেআউট বা পুনরায় রং করার পদক্ষেপ নেই।

বোনাস ভুল ধারণা: এটি ভিউ ট্রানজিশন API

ভিউ ট্রানজিশন সম্পর্কে কথা বলার সময়, লোকেরা প্রায়শই "ভিউ ট্রানজিশন API" উল্লেখ করে। এটা ভুল। API কে "ভিউ ট্রানজিশন API" বলা হয় - একবচন "ট্রানজিশন" নোট করুন।

ভুল ধারনাটি কিছু নিবন্ধ থেকে উদ্ভূত হয়েছে – যার মধ্যে এক পর্যায়ে DCC-তে আমাদের নিজস্ব ডক্স -ভুল শব্দ ব্যবহার করা হয়েছে।

সঠিক নাম মনে রাখার কৌশল হল আপনি (এক বা একাধিক) ভিউ ট্রানজিশন তৈরি করতে (এক) ভিউ ট্রানজিশন API ব্যবহার করেন।