ক্রোম ১৪৭ এলিমেন্ট-স্কোপড ভিউ ট্রানজিশনের মাধ্যমে যুগপৎ এবং নেস্টেড ভিউ ট্রানজিশন সক্ষম করে।

Bramus

প্রকাশিত: ২৭ মার্চ, ২০২৬

ক্রোম ১৪৭-এ এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন চালু করা হয়েছে, যার মাধ্যমে আপনি Element.startViewTransition() কল করে DOM-এর কোনো সাবট্রি থেকে ভিউ ট্রানজিশন শুরু করতে পারেন।

এই ফিচারটি একাধিক ভিউ ট্রানজিশনকে একই সাথে চালাতে সক্ষম করে, চলমান ভিউ ট্রানজিশনগুলোকে নেস্ট করার সুবিধা দেয় এবং position: fixed কন্টেন্টের লেয়ারিং সমস্যা সমাধান করে—এই সবকিছুই পেজের বাকি অংশকে ইন্টারেক্টিভ রেখেই করা যায়।

কী পরিবর্তন হয়েছে?

ক্রোম ১৪০-এ ডেভেলপার পরীক্ষার জন্য ফিচারটি প্রস্তুত বলে ঘোষণা করার পর থেকে, আমরা এর খুঁটিনাটি বিষয়গুলো, বিশেষ করে ডিফল্ট আচরণগুলো চূড়ান্ত করার জন্য কমিউনিটি এবং সিএসএস ওয়ার্কিং গ্রুপের সাথে সহযোগিতা করেছি:

• স্কোপ রুটগুলো ডিফল্টরূপে স্ব-অংশগ্রহণকারী হয়।
• নেস্টেড ভিউ ট্রানজিশন গ্রুপ ব্যবহার করার মাধ্যমে স্কোপড ভিউ ট্রানজিশনগুলো স্বয়ংক্রিয়ভাবে তাদের নেস্টেড সিউডো ধারণ করে।
• একটি স্কোপড ভিউ ট্রানজিশনের মধ্যে থাকা ::view-transition-group-children() সিউডো ফাংশনটি স্বয়ংক্রিয়ভাবে এর বিষয়বস্তু ক্লিপ করে ফেলে, যদি স্কোপ রুট এর ওভারফ্লো ক্লিপ করে।
• এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন চলাকালীন, ট্রানজিশন স্বয়ংক্রিয়ভাবে স্কোপ রুটের উপর contain: layout এবং view-transition-scope: all প্রয়োগ করে।

এই আপডেটগুলোর পর, ক্রোম স্টেবল ভার্সন ১৪৭ থেকে এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন পাওয়া যাচ্ছে।

ডেমো

তালিকাগুলি এলোমেলো করা

এই ডেমোটি আপনাকে প্রতিটি তালিকার আইটেমগুলো এলোমেলো করতে দেয়। এছাড়াও, মাঝখানের বাটনটি নির্বাচন করে আপনি তালিকাগুলোর অবস্থান অদলবদল করতে পারেন।

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

আমার পাতাগোনিয়া ভ্রমণ

‘মাই প্যাটাগোনিয়া ট্রিপ’ ডেমোটি এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন প্রদর্শন করে। এই ডেমোটি ‘ওয়েব ইউএক্স, রি-ইমাজিনড’ ক্যাম্পেইন ভিডিওর উপর ভিত্তি করে তৈরি করা হয়েছে।

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

ডেমোটিতে তিনটি স্থানে এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন ব্যবহার করা হয়েছে:

• ফিল্টার করার সময় আইটেমগুলোর গ্রিড।
• নির্বাচিত আইটেমের তালিকায় যুক্ত করার সময় গ্রিডের আইটেমগুলো।
• যে সাইডবারটি নির্বাচিত আইটেমগুলোর তালিকা দেখায়।

নির্দেশিকাটি পড়ুন

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

এলিমেন্ট-স্কোপড ভিউ ট্রানজিশন গাইডটি পড়ুন