সুতরাং, আপনি প্রদর্শন সম্পত্তি অ্যানিমেট করতে চান

সিএসএস ওয়ার্কিং গ্রুপ কয়েক সপ্তাহ আগে যে একটি থাম্বস আপ দিয়েছেন. সুপার-ডুপার ধারণাগত প্রস্তাব হল যে আমরা অ্যানিমেট করতে পারি বা পরিবর্তন করতে পারি, বলুন, display: block থেকে display: none.

এটি একটি বিট একটি মস্তিষ্ক-টুইস্টার কারণ সেটিং সম্পর্কে যুক্তি display: none একটি উপাদান অ্যানিমেশন বাতিল. এবং এটি যোগ করা অ্যানিমেশনগুলি পুনরায় চালু করে। বৈশিষ্ট অনুযায়ী:

সেট করা হচ্ছে display সম্পত্তি none উপাদান এবং এর বংশধরে প্রয়োগ করা যেকোন চলমান অ্যানিমেশনকে বন্ধ করে দেবে। যদি কোনো এলিমেন্টের ডিসপ্লে কোনোটি না থাকে, তাহলে ডিসপ্লেকে অন্য কোনো মানতে আপডেট করা হচ্ছে none দ্বারা উপাদানে প্রয়োগ করা সমস্ত অ্যানিমেশন শুরু হবে animation-name সম্পত্তি, সেইসাথে সমস্ত অ্যানিমেশন এর সাথে বংশধরদের জন্য প্রযোজ্য display আর অন্যান্য none.

সেই বৃত্তাকার আচরণই ধারণাটিকে আগমনের পরে মৃত বলে মনে করে। কিন্তু if @keyframes কোন সমর্থন display মূল্য আর অন্যান্য none, তাহলে কোন উপায় নেই none জিনিসগুলি বাতিল বা পুনরায় চালু করতে। যে দেয় অ-none মান অগ্রাধিকার, অনুমতি none অ্যানিমেশন বা ট্রানজিশন সম্পূর্ণ হওয়ার পরেই তার কাজটি করতে হবে।

মরিয়মের বংশীধ্বনি (এটিকে আমরা আসলেই বলছি, তাই না?) ব্যাখ্যা করে যে এটি কীভাবে কাজ করতে পারে:

আমরা ঠিক এর মধ্যে ইন্টারপোলেট করছি না, বলুন, block এবং none, কিন্তু অনুমতি দেয় block যতক্ষণ না জিনিসগুলি সরানো বন্ধ না হয় এবং এটি প্রয়োগ করা নিরাপদ হয় ততক্ষণ পর্যন্ত অক্ষত থাকতে হবে none. এগুলি কীওয়ার্ড, তাই দুটির মধ্যে কোনও স্পষ্ট মান নেই৷ যেমন, এটি একটি পৃথক অ্যানিমেশন থেকে যায়। অ্যানিমেশন সম্পূর্ণ হলে আমরা দুটি মানের মধ্যে টগল করছি।

এই রবার্ট ফ্ল্যাকএর উদাহরণ সরাসরি থেকে টানা আলোচনা:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

এটি একটি সহায়ক উদাহরণ কারণ এটি দেখায় কিভাবে প্রথম ফ্রেম উপাদানটিকে সেট করে display: block, যা অন্তর্নিহিত উপর অগ্রাধিকার দেওয়া হয় display: none অ-হিসাবেnone মান এটি অ্যানিমেশন চালানোর এবং ছাড়াই শেষ করার অনুমতি দেয় none প্রক্রিয়ায় এটি বাতিল বা পুনরায় সেট করা যেহেতু এটি শুধুমাত্র সমাধান করে পরে অ্যানিমেশন.

এটি মাস্টোডন সম্পর্কে মরিয়মের উল্লেখ করা উদাহরণ:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

আমরা এই সময় একটি ট্রানজিশন নিয়ে কাজ করছি। নিম্নাবস্থিত display মান সেট করা হয় none কিছু ঘটার আগে, তাই এটি সম্পূর্ণরূপে নথি প্রবাহের বাইরে। এখন, যদি আমরা এটিকে হোভারে স্থানান্তর করতে পারি, তাহলে হয়তো এইরকম:

.hide:hover {
  display: block;
  opacity: 1;
}

…তারপর উপাদানটি তাত্ত্বিকভাবে বিবর্ণ হওয়া উচিত 200ms. আবার, আমরা মধ্যে টগল করছি display মান, কিন্তু block অগ্রাধিকার দেওয়া হয় যাতে রূপান্তরটি সামনে বাতিল না হয় এবং আসলে পরে প্রয়োগ করা হয় opacity এর রূপান্তর শেষ করে।

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

কিন্তু কি একটি সুপার শান্ত প্রথম পদক্ষেপ!