এখন বেসলাইনে: অ্যানিমেটিং এন্ট্রি প্রভাব

Una Kravets

পোস্টে প্রবেশ এবং প্রস্থান প্রভাবের জন্য চারটি নতুন CSS বৈশিষ্ট্য কিছু দরকারী বৈশিষ্ট্য শেয়ার করা হয়েছে যা সবেমাত্র Chrome এ অবতরণ করেছে। এখন, এই বৈশিষ্ট্যগুলির মধ্যে দুটি, @স্টার্টিং-স্টাইল এবং ট্রানজিশন-আচরণ: অনুমতি-বিচ্ছিন্ন ফায়ারফক্স 129 প্রকাশের সাথে নতুনভাবে উপলব্ধ বেসলাইন হয়ে উঠেছে। আপনি এখন এন্ট্রি অ্যানিমেশন প্রভাব তৈরি করতে পারেন, যার মধ্যে রয়েছে display: none , এবং উপরের স্তরে অ্যানিমেটিং।

@starting-style দিয়ে এন্ট্রি প্রভাব সেট আপ করা হচ্ছে

@starting-style নিয়মটি পৃষ্ঠায় রেন্ডার হওয়ার আগে একটি উপাদানের প্রাথমিক শৈলীগুলিকে সংজ্ঞায়িত করে। display: none , কারণ তাদের এমন একটি অবস্থার প্রয়োজন যা থেকে অ্যানিমেট করা যায়৷

CSS-এর মধ্যে এলিমেন্টের স্টাইলগুলি রেখে, CSS-এর অন্য যেকোনো অ্যাট-রুলের মতো @starting-style ব্যবহার করুন। উদাহরণস্বরূপ, একটি <dialog> দিয়ে, dialog[open] শৈলীগুলিকে @starting-style নিয়মের মধ্যে রাখুন। এই ডায়ালগ খোলার আগে ব্যবহৃত শৈলী.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

allow-discrete বিচ্ছিন্ন অ্যানিমেশনগুলি সক্ষম করা

display: none , যেমন ডায়ালগ এবং পপোভার, একটি নতুন অ্যানিমেশন মোড সক্ষম করা, বিচ্ছিন্ন বৈশিষ্ট্যগুলির অ্যানিমেশনকে সমর্থন করার জন্য। বিচ্ছিন্ন বৈশিষ্ট্যগুলি হল যেগুলি মানগুলির মধ্যে প্রসারিত করতে পারে না। আপনি একটি চালু/বন্ধ সুইচ মত এই চিন্তা করতে পারেন. কিছু উদাহরণের মধ্যে রয়েছে display , visibility , mix-blend-mode —যে কোনো বৈশিষ্ট্য যেখানে বৈশিষ্ট্যটি এক বা অন্য মান। এই নতুন অ্যানিমেশন মোডের সাথে, ব্রাউজারটি এখন ট্রানজিশনের 0% পয়েন্টের পরিবর্তে 50% পয়েন্টে মান অদলবদল করতে সমর্থন করে।

display: none এবং visibility: hidden উপাদান:

• স্বতন্ত্র সম্পত্তি transition-behavior যার মান allow-discrete ।
• আপনার ট্রানজিশন শর্টহ্যান্ডে allow-discrete মান।

আমরা দ্বিতীয় পদ্ধতির সুপারিশ করি, কারণ transition-behavior প্রয়োগ করা transition শর্টহ্যান্ডে অন্তর্ভুক্ত। আপনি যদি ট্রানজিশন-আচরণ প্রয়োগ করেন: ট্রানজিশন শর্টহ্যান্ডের আগে transition-behavior: allow-discrete যেখানে আপনি ট্রানজিশন, টাইমিং এবং ইজিং ফাংশন প্রয়োগ করছেন, ব্রাউজার transition-behavior উপেক্ষা করবে।

শর্টহ্যান্ডে এটি ব্যবহার করলে, আপনাকে শুধুমাত্র নির্দিষ্ট বৈশিষ্ট্যগুলিতে allow-discrete কীওয়ার্ড প্রয়োগ করতে হবে যার জন্য আলাদা অ্যানিমেশন প্রয়োজন। এটি নিম্নলিখিত CSS-এ প্রদর্শিত হয়েছে যা translate সম্পত্তি এবং display সম্পত্তি উভয়ই রূপান্তরিত করে, কিন্তু শুধুমাত্র display সম্পত্তিতে allow-discrete কীওয়ার্ড প্রয়োগ করে।

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

ডেমো: সব একসাথে করা

এই বৈশিষ্ট্যগুলি ব্যবহার করা বিশেষভাবে টপ-লেয়ার উপাদানগুলির জন্য উপযোগী, যেমন <dialog> উপাদান বা উপাদান যা popover বৈশিষ্ট্য ব্যবহার করে। নিম্নলিখিত উদাহরণে, একটি <dialog> উপাদান ভিউপোর্টের নিচ থেকে অ্যানিমেটেড করা হয় (প্রথম দিকে 100vh উল্লম্ব অনুবাদ অফ-স্ক্রিন থেকে শুরু হয়), ভিউপোর্টের কেন্দ্রে, যখন <dialog> খোলা থাকে তখন অনুবাদটি সরিয়ে দেওয়া হয়।

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

আপনি CSS নেস্টিংয়ের সাথে এটি আরও সংক্ষিপ্তভাবে লিখতে পারেন, এটি একটি বেসলাইন নতুন উপলব্ধ বৈশিষ্ট্যও।

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

উপসংহার

বেসলাইনে এই ভূমির মতো অগ্রগতি দেখতে পাওয়া উত্তেজনাপূর্ণ, এবং অন্ততপক্ষে, এই উপাদানগুলির জন্য এটি একটি চমৎকার প্রগতিশীল বর্ধন। এই এন্ট্রি ইফেক্ট ফিচারগুলি ছাড়া, উপরের স্তরে বা display: none শৈলীই কেবল প্রদর্শিত হবে না, যেমনটি আজকের মতো।

ক্রমবর্ধমান উপায়ে প্রস্থান প্রভাবগুলি কীভাবে যুক্ত করা যায় তা শিখতে, "মসৃণ প্রবেশ এবং প্রস্থান অ্যানিমেশনগুলির জন্য চারটি নতুন CSS বৈশিষ্ট্য" নিবন্ধটি দেখুন এবং এই বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে, নিম্নলিখিত ডকুমেন্টেশন সংস্থানগুলি দেখুন:

• MDN-এ @স্টার্টিং-স্টাইল
• MDN-এ রূপান্তর-আচরণ