ভিউ ট্রানজিশন API আপনাকে একটি একক ধাপে DOM আপডেট করতে দেয়, যখন দুটি রাজ্যের মধ্যে একটি অ্যানিমেটেড ট্রানজিশন তৈরি করে।
এই ধরণের রূপান্তরগুলি আমার সহ বিকাশকারীদের কাছ থেকে একটি ঘন ঘন অনুরোধ করা বৈশিষ্ট্য ছিল এবং আমি মনে করি আমরা এটিকে এমনভাবে অবতরণ করতে পেরেছি যা এক্সটেনসিবিলিটি এবং কাস্টমাইজেশনের সাথে ভাল ডিফল্টগুলির ভারসাম্য বজায় রাখে৷ মনে হচ্ছে আমরা পিঠে চাপ দিচ্ছি, তবে বিকাশকারীর প্রতিক্রিয়া এই বৈশিষ্ট্যটির নকশার মূল বিষয় ছিল। এই বৈশিষ্ট্যের একটি পূর্বের প্রোটোটাইপ অনেক কম নমনীয় ছিল, এবং লোকেরা (আপনার মত?) যারা প্রোটোটাইপগুলির সাথে খেলতে এবং প্রতিক্রিয়া প্রদান করতে সময় নিয়েছিল তারা সম্পূর্ণ পুনর্বিবেচনা শুরু করেছিল। ধন্যবাদ!
বৈশিষ্ট্যটি ধরতে এবং কিছু ডেমোর সাথে খেলতে, আমাদের গাইডটি দেখুন । যদি এমন কিছু থাকে যা আপনার মনে হয় সেখানে কভার করা হয়নি, অনুগ্রহ করে Twitter, Mastodon বা ইমেলের মাধ্যমে আমার সাথে যোগাযোগ করুন ৷
ভিউ ট্রানজিশন API বর্তমানে শুধুমাত্র Chrome-এ উপলব্ধ; ধন্যবাদ এটি একটি প্রগতিশীল বর্ধন হিসাবে ব্যবহার করা যেতে পারে। গাইডটিতে একটি সহায়ক ফাংশন রয়েছে যা আপনি ব্রাউজার জুড়ে ব্যবহার করতে পারেন, তবে শুধুমাত্র যে ব্রাউজারগুলি ভিউ ট্রানজিশন সমর্থন করে তারা অ্যানিমেশন পাবে।
আমরা অন্যান্য ব্রাউজার বিক্রেতা এবং স্বাধীনদের কাছ থেকে ইনপুট সহ CSS ওয়ার্কিং গ্রুপের মধ্যে এই বৈশিষ্ট্যটি তৈরি করেছি । অন্যান্য ব্রাউজারগুলি ভিউ ট্রানজিশন গ্রহণ করবে কিনা বা কখন তা আমরা জানি না, তবে Mozilla-এর স্ট্যান্ডার্ড পজিশন এবং WebKit-এর স্ট্যান্ডার্ড পজিশনের উপর নজর রাখুন।
কিন্তু, আমরা এখনও 'সম্পন্ন' করিনি!
Chrome 111-এ কার্যকারিতা অবতরণ শুধুমাত্র প্রথম প্রকাশ। আমরা আশা করি আমরা ইতিমধ্যেই সমস্ত বাগ খুঁজে পেয়েছি, তবে অনুগ্রহ করে আপনি crbug.com- এ যে কোনও সমস্যা খুঁজে পেতে পারেন, বিশেষত একটি হ্রাসকৃত ডেমো সহ। যদি এটি এমন কিছু না হয় যার সাথে আপনি পরিচিত বা স্বাচ্ছন্দ্য বোধ করেন, Twitter , Mastodon বা ইমেলের মাধ্যমে আমার সাথে যোগাযোগ করুন এবং আমি সাহায্য করব৷
এই রিলিজটি একটি বড় ছবির একটি ছোট-কিন্তু-আশাজনক-উপযোগী অংশ। আমরা ইতিমধ্যেই এই বৈশিষ্ট্যের কিছু এক্সটেনশন স্কেচ করেছি যাতে নিশ্চিত করা যায় যে আমরা আজকে যে অংশগুলি শিপিং করছি তা ভবিষ্যতের জন্য সামঞ্জস্যপূর্ণ।
আমরা যা ভাবছি তার একটি লুকোচুরি পূর্বরূপ এখানে। এগুলি অগ্রাধিকারের ক্রমানুসারে নয় (ভাল, হয়ত প্রথমটি অনেক লোকের জন্য সবচেয়ে গুরুত্বপূর্ণ), তাই আপনার কাছে কোন সংযোজনগুলি সবচেয়ে গুরুত্বপূর্ণ সে বিষয়ে আমরা প্রতিক্রিয়া জানাতে চাই৷
নথি জুড়ে রূপান্তর
এটি এমন একটি যা আমি মনে করি বেশিরভাগ বিকাশকারীরা চান যে আমরা পরবর্তীতে কাজ করি এবং ভাল খবর হল যে আমরা ইতিমধ্যে এটিতে কাজ করছি!
ভিউ ট্রানজিশন API ডিজাইন করা হয়েছে যাতে এটি একই-অরিজিন ডকুমেন্ট জুড়ে কাজ করতে পারে। শুধুমাত্র পার্থক্য হল, startViewTransition DOM অবস্থার পরিবর্তনের সংকেত দেওয়ার পরিবর্তে, নেভিগেশন নিজেই সেই পরিবর্তনের সংকেত দেবে।
chrome://flags/#view-transition-on-navigation পতাকার পিছনে এটির আমাদের প্রোটোটাইপ৷ এখানে একটি অতি-সাধারণ ডেমো এবং আরও জটিল ডেমো ।
এটিকে এগিয়ে নিয়ে যাওয়ার জন্য আমাদের প্রতিটি পৃষ্ঠা কীভাবে রূপান্তরের জন্য বেছে নেয় তা বের করতে হবে। এই মুহূর্তে আমরা একটি মেটা ট্যাগ ব্যবহার করছি: <meta name="view-transition" content="same-origin"> , কিন্তু আমরা মনে করি এর জন্য CSS একটি ভালো জায়গা। এছাড়াও আমরা জাভাস্ক্রিপ্ট লেখার প্রয়োজন ছাড়াই আপনি কোন ধরনের পৃষ্ঠা থেকে স্থানান্তরিত হচ্ছেন তা জানা সহজ করতে চাই।
অনেক কাজ করার আছে, এবং আমরা এটিকে 'দ্রুত' করার চেয়ে 'সঠিক' অবতরণ করতে চাই, তবে এটি অবশ্যই আমাদের জন্য একটি অগ্রাধিকার।
কম্পোজিটর-চালিত অ্যানিমেশন
আমরা ডিফল্টরূপে ট্রানজিশন গ্রুপে প্রস্থ এবং উচ্চতা অ্যানিমেট করতে বেছে নিয়েছি কারণ এটি কাস্টমাইজ করা অনেক সহজ। যাইহোক, এর অর্থ হল অ্যানিমেশনটি মূল থ্রেডে চলে, যা আদর্শ নয়, বিশেষ করে পৃষ্ঠা লোডের সময়।
আমরা ডিফল্ট অ্যানিমেশন এবং সাধারণ কাস্টমাইজেশন শনাক্ত করার পরিকল্পনা করি, তারপর একটি চমৎকার পারফরম্যান্স বুস্টের জন্য কম্পোজিটর-চালিত অ্যানিমেশন হিসাবে তাদের পুনরায় ব্যাখ্যা করি।
স্কোপড ট্রানজিশন
এই মুহূর্তে, SPA ট্রানজিশনগুলি পুরো নথিতে স্কোপ করা হয়েছে, এবং একবারে শুধুমাত্র একটি ট্রানজিশন চলতে পারে। আমরা এমন একটি বৈশিষ্ট্য প্রবর্তন করতে চাই যা পরিবর্তনগুলিকে একটি নির্দিষ্ট উপাদানে স্কোপ করার অনুমতি দেয় যাতে একাধিক পৃষ্ঠা উপাদান স্বাধীনভাবে রূপান্তর চালাতে পারে।
এটি একটি এমবেড করা ভিডিও প্লেয়ারকে একই সময়ে একটি এমবেডেড চ্যাট উইজেটের মতো ভিউ ট্রানজিশন ব্যবহার করার অনুমতি দেবে৷
নেস্টেড ট্রানজিশন গ্রুপ
এই মুহূর্তে, সবাই ::view-transition-group ভাইবোন। এটি প্রায়শই একটি ভাল জিনিস, কারণ এটি ভিউগুলিকে এক পাত্র থেকে অন্য পাত্রে স্থানান্তর করতে দেয় এবং আপনাকে ক্লিপিংয়ের বিষয়ে চিন্তা করতে হবে না।
যাইহোক, কখনও কখনও আপনি কিছু অভিভাবক দ্বারা একটি দৃশ্য ক্লিপ করতে চান, যা পরিবর্তনের সাথে জড়িত হতে পারে।
আমরা একটি অপ্ট-ইন তদন্ত করতে চাই যা একটি নির্দিষ্ট ::view-transition-group অন্য ::view-transition-group মধ্যে রাখে।
ট্রানজিশনের ক্লাস
প্রতিটি view-transition-name অনন্য হতে হবে। এইভাবে আমরা সনাক্ত করি যে একটি নির্দিষ্ট উপাদান ধারণাগতভাবে DOM পরিবর্তনের উভয় পাশে "একই", এমনকি যদি এটি আক্ষরিকভাবে একই উপাদান না হয়।
যাইহোক, কখনও কখনও ভিন্ন view-transition-name সহ জিনিসগুলি একই ধরণের অ্যানিমেশন ব্যবহার করা উচিত। এই মুহূর্তে, এর অর্থ প্রতিটি view-transition-name জন্য একটি নির্বাচক নিয়ম যোগ করা।
আমরা এই সীমাবদ্ধতা কাটিয়ে উঠতে শ্রেণী পরিবর্তনের একটি উপায় যোগ করতে চাই।
অফস্ক্রিন উপাদান উপেক্ষা করুন
আপনি যদি একটি উপাদানকে একটি view-transition-name দেন, তবে এটি তার নিজস্ব গ্রুপ হিসাবে রূপান্তরের সাথে জড়িত হবে। কখনও কখনও এটি আদর্শ নয়। উদাহরণ স্বরূপ, আপনি যদি একটি হেডারকে একটি view-transition-name দেন, এবং আপনি এমন একটি রাজ্য থেকে যান যেখানে আপনি 2000 পিক্সেল দ্বারা স্ক্রোল করেছেন, পৃষ্ঠার শীর্ষে একটি রাজ্যে যান, হেডারটি 2000 পিক্সেল দূরে থেকে অ্যানিমেট হবে, যা সময়ের পরিপ্রেক্ষিতে ভুল মনে হয়।
পরিবর্তে, আমরা একটি অপ্ট-ইন যোগ করতে চাই যেখানে একটি উপাদান উপেক্ষা করা হবে , যেন এটির একটি view-transition-name নেই, যদি এটি সম্পূর্ণভাবে ভিউপোর্টের বাইরে থাকে।
আপনি ইতিমধ্যেই জাভাস্ক্রিপ্টের সাথে গতিশীলভাবে style.viewTransitionName সেট করে এটি করতে পারেন, তবে এটির জন্য আমাদের একটি ঘোষণামূলক সমাধান থাকা উচিত।
অনুরোধ অ্যানিমেশনফ্রেম-চালিত অ্যানিমেশন
আপনি ইতিমধ্যেই ওয়েব অ্যানিমেশন API এর মাধ্যমে JavaScript এর সাথে ভিউ ট্রানজিশন অ্যানিমেশন তৈরি করতে পারেন, কিন্তু কখনও কখনও আপনাকে requestAnimationFrame এর সাথে ফ্রেম-বাই-ফ্রেম জিনিসগুলি চালাতে হবে।
আপনি ইতিমধ্যে এটি করতে পারেন, কিন্তু এটি একটু হ্যাকি। এখানে কিছু সাহায্যকারীর একটি ডেমো রয়েছে যা আপনার কাজে লাগতে পারে। আমরা এটা না-হ্যাকি করতে চাই!
আমরা এটি দুটি অংশে করব। এক, অ্যানিমেশন কখন সম্পন্ন হয় তা নির্দেশ করার জন্য একটি API প্রদান করে। এবং দুই, সিউডো-এলিমেন্টগুলিতে জাভাস্ক্রিপ্ট অ্যাক্সেস প্রদান করে । যে দ্বিতীয় অংশ একটি চমত্কার বড় কাজ হতে পারে, কিন্তু এটি দীর্ঘ মেয়াদে সঠিক জিনিস মত মনে হয়.
এখন কিছু দুর্দান্ত ভিউ ট্রানজিশন করতে যান!
আশা করি, আমার মতো, আপনি এই বৈশিষ্ট্যটির বর্তমান এবং ভবিষ্যত সম্পর্কে উত্তেজিত। আপনার যদি কোনো প্রতিক্রিয়া থাকে, অথবা আপনি যে কিছু দৃশ্য পরিবর্তন করতে চান তা দেখাতে চান, সেগুলি মসৃণ এবং কার্যকরী , বা সাধারণ নির্বোধ , অনুগ্রহ করে Twitter বা Mastodon- এ আমার সাথে যোগাযোগ করুন !