اکنون در Baseline: انیمیشن جلوه های ورودی

یونا کراوتس

پست چهار ویژگی جدید CSS برای جلوه‌های ورود و خروج، برخی از ویژگی‌های مفیدی را که به تازگی در کروم قرار گرفته بودند به اشتراک گذاشت. اکنون، دو مورد از این ویژگی ها، @starting-style و transition-behavior: allow-discrete با انتشار فایرفاکس 129 به تازگی در دسترس قرار گرفته است. اکنون می توانید جلوه های انیمیشن ورودی را برای عناصر ایجاد کنید، از جمله آنهایی که از display: none ، و متحرک سازی در لایه بالایی

راه اندازی جلوه های ورودی با @starting-style

پشتیبانی مرورگر

  • 117
  • 117
  • 129
  • 17.5

منبع

قانون @starting-style استایل های اولیه را بر روی یک عنصر قبل از رندر شدن در صفحه تعریف می کند. این برای عناصری که از display: none ، زیرا آنها به حالتی نیاز دارند که از آن در آن متحرک شوند.

از @starting-style مانند هر at-rule دیگری در CSS، با قرار دادن استایل های عنصر در آن استفاده کنید. به عنوان مثال، با یک <dialog> ، استایل‌های dialog[open] را در یک قانون @starting-style قرار دهید. اینها سبک هایی هستند که قبل از باز شدن گفتگو استفاده می شوند.

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

فعال کردن انیمیشن های گسسته با allow-discrete

پشتیبانی مرورگر

  • 117
  • 117
  • 129
  • 17.4

منبع

دومین چیزی که برای پشتیبانی از انیمیشن های ورودی برای عناصری که از display: none ، مانند دیالوگ ها و پاپاورها، فعال کردن یک حالت انیمیشن جدید برای پشتیبانی از انیمیشن ویژگی های گسسته است. ویژگی های گسسته آنهایی هستند که نمی توانند بین مقادیر درون یابی کنند. می توانید به این موارد مانند یک کلید روشن/خاموش فکر کنید. برخی از مثال‌ها عبارتند از: display ، visibility ، mix-blend-mode - هر ویژگی که در آن ویژگی یک مقدار یا مقدار دیگر باشد. با این حالت انیمیشن جدید، مرورگر اکنون از جابجایی مقادیر در نقطه 50% به جای 0% از یک انتقال پشتیبانی می کند.

از یکی از دو روش زیر برای متحرک سازی جلوه های ورودی برای display: none و visibility: hidden :

  • ویژگی مستقل transition-behavior با مقدار allow-discrete .
  • مقدار allow-discrete در خلاصه نویسی انتقال شما.

ما روش دوم را توصیه می‌کنیم، زیرا اعمال transition-behavior در کوتاه‌نویسی transition گنجانده شده است. اگر transition-behavior: allow-discrete قبل از کوتاه‌نویسی انتقال اعمال کنید، مرورگر transition-behavior نادیده می‌گیرد.

در صورت استفاده از این در کوتاه‌نویسی، فقط باید کلمه کلیدی allow-discrete برای ویژگی‌های خاصی که به انیمیشن‌های مجزا نیاز دارند، اعمال کنید. این در CSS زیر نشان داده شده است که هم ویژگی translate و هم ویژگی display را انتقال می دهد، اما فقط کلمه کلیدی allow-discrete را برای ویژگی display اعمال می کند.

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 بنویسید، که همچنین یک ویژگی جدید در دسترس است.

پشتیبانی مرورگر

  • 120
  • 120
  • 117
  • 17.2

منبع

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

  @starting-style {
    translate: 0 100vh;
  }
}
متحرک سازی نسخه ی نمایشی در یک عنصر گفتگو.

نتیجه

دیدن پیشرفتی مانند این سرزمین در Baseline هیجان‌انگیز است، و حداقل، این یک پیشرفت پیشرونده خوب برای آن عناصر است. بدون این ویژگی‌های جلوه ورودی، عناصری که در لایه بالایی یا از یک display: none سبک‌ها به سادگی در صفحه شما بدون انتقال ظاهر می‌شوند، مانند امروز.

برای یادگیری نحوه افزودن جلوه‌های خروج به روشی پیشرفته، مقاله «چهار ویژگی جدید CSS برای انیمیشن‌های ورود و خروج روان» را بررسی کنید، و برای کسب اطلاعات بیشتر در مورد این ویژگی‌ها، منابع مستند زیر را بررسی کنید: