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