সিএসএস ট্রানজিশনগুলি ইন্টারঅ্যাকটিভিটি তৈরি করার একটি দুর্দান্ত উপায়। এটা যথেষ্ট, transition একটি উপাদানের প্রাথমিক অবস্থায়, এবং ব্রাউজার দুটি অবস্থার মধ্যে রূপান্তরকে অ্যানিমেট করে। অভ্যন্তরীণ উপাদান আকার জন্য রূপান্তর মত auto যাইহোক, কয়েক দশক ধরে ওয়েব ডেভেলপারদের জন্য একটি সমস্যা হয়েছে, এবং একমাত্র বিকল্প ছিল জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে উচ্চতা গণনা করা।
আরেকটি চ্যালেঞ্জ হল ট্রানজিশন শুরু করা যখন একটি উপাদান তার প্রথম স্টাইল পায় - যেমন যখন এটি DOM এ যোগ করা হয় বা যখন display-এর মান none পরিবর্তন এই নিবন্ধটি ব্যাখ্যা করে কিভাবে নতুন CSS বৈশিষ্ট্যগুলির সাথে এই সমস্যাটি সমাধান করা যায় calc-size(), interpolate-size, @starting-style এবং transition-behavior পরিচালনা করা যেতে পারে।
সঙ্গে সমাধান calc-size()
যদি একটি DOM উপাদান থাকে যা একটি বন্ধ অবস্থা থেকে আসে (height: 0) একটি উন্মুক্ত অবস্থায় (height: auto) চলে যায়, অ্যানিমেশন সাধারণত চালানো হয় না, যদিও transitionসম্পত্তি সেট করা হয়। এর কারণ ব্রাউজারগুলি অন্তর্নিহিত আকারে রূপান্তর সমর্থন করে না auto সমর্থন নতুন এক calc-size()ফাংশন, যাইহোক, এই অন্তর্নিহিত পরিমাণে গণনা সক্ষম করে এবং এইভাবে রূপান্তরও:
f95f6dcb193aa903adc84ce47bc4a296
দ calc-size()- ফাংশন এখনও সব ব্রাউজারে উপলব্ধ নয়। আসলটি রেখে একটি ফলব্যাক অর্জন করা যেতে পারে height: auto- ঘোষণা অর্জন করা যেতে পারে।
সঙ্গে সমাধান interpolate-size
দ interpolate-sizeসম্পত্তি আপনাকে ব্রাউজারগুলির ইন্টারপোলেশন আচরণ সেট করতে এবং কীওয়ার্ডগুলির মধ্যে পার্থক্য করতে হবে কিনা তা সিদ্ধান্ত নিতে দেয় যেমন auto প্রসারিত করা উচিত ডিফল্টরূপে, ইন্টারপোলেশন শুধুমাত্র সাংখ্যিক মানের মধ্যে ঘটে। সঙ্গে allow-keywords যাইহোক, আপনি কীওয়ার্ডগুলির মধ্যে রূপান্তর সক্ষম করতে পারেন:
f95f6dcb193aa903adc84ce47bc4a296
আপনার দ্বারা interpolate-size: allow-keywords উপর :rootউপাদান, আপনি পুরো পৃষ্ঠার জন্য নতুন আচরণ সক্রিয় করুন।
থেকে উত্তরণ display:none
আরেকটি সমস্যা দেখা দেয় যখন একটি উপাদান display:none একটি দৃশ্যমান অবস্থায় রূপান্তর। সেখানে display একটি অ্যানিমেটেবল সম্পত্তি নয়, কোন অ্যানিমেশন ঘটে না। নতুন CSS ফাংশন এখানে সাহায্য করে @starting-style এবং transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
সঙ্গে transition-behavior: allow-discrete নিশ্চিত করে যে অ্যানিমেশন এর আগে চলে display-এর মান block অন none সুইচ করা হয় এই নিয়মগুলি একটি প্রাথমিক শৈলী আপডেটের সময়ও রূপান্তর কার্যকর করার অনুমতি দেয়। দ @starting-styleনিয়ম নিশ্চিত করে যে অ্যানিমেশন একটি প্রাথমিক শৈলী আপডেটে সঠিকভাবে চলে।
ব্রাউজার সমর্থন
বর্তমানে নতুন বৈশিষ্ট্য calc-size() এবং interpolate-size এখনও সব ব্রাউজার দ্বারা সমর্থিত নয়. ক্রোমে এগুলি একটি পরীক্ষার পতাকার পিছনে উপলব্ধ, তবে এখনও সাফারি এবং ফায়ারফক্সে নয়৷ অনুরূপভাবে, জন্য সমর্থন transition-behavior Chrome এবং Edge-এ উপস্থিত, কিন্তু Safari এবং Firefox-এ নয়। আশা করি ভবিষ্যতে এটি পরিবর্তন হবে।