‏انیمیشن باز و بستهٔ دیالوگ با CSS

این مقاله که نوشتهٔ کریس کویر تو وبلاگ Frontend Masters ـه، اولین قسمت از یه سری دربارهٔ انیمیشن دادن به عناصریه که وارد یا خارج از دید می‌شن. نویسنده شروع می‌کنه از حالتی که یه عنصر از display: none به display: block می‌ره؛ کاری که به گفتهٔ خودش تا همین اواخر واقعاً سخت بود ولی خیلی هم پرکاربرده، چون حرکت کمک می‌کنه کاربر بفهمه یه چیز تازه ظاهر یا ناپدید شده.

مشکل اینه که اگه همراه با تغییرِ display بخوای مثلاً opacity رو هم ترنزیشن بدی، انیمیشن کار نمی‌کنه و عنصر یهو ظاهر یا محو می‌شه. دلیلش اینه که خاصیتِ display تو لحظهٔ نامناسبی از تایم‌لاین عوض می‌شه. نویسنده برای مثال‌ها سراغ المنت می‌ره که به‌صورت پیش‌فرض خودش بین این دو حالت جابه‌جا می‌شه.

اولین ترفند، یه کلیدواژهٔ تازه به اسم allow-discrete ـه که به‌عنوان transition-behavior می‌آد. این باعث می‌شه موقع باز شدن، تغییر به display: block فوراً اتفاق بیفته تا opacity فرصت ترنزیشن داشته باشه، و موقع بسته شدن برعکس، تغییر به display: none صبر کنه تا انیمیشن تموم بشه.

ترفند دوم @starting-style ـه: یه قانون CSS که می‌گه عنصر موقع اولین رندر چه استایلی داره، تا ترنزیشن از همون مقدارها شروع بشه. نکته‌ای که نویسنده تأکید می‌کنه اینه که این بلوک باید آخر از همه بیاد، چون @starting-style هیچ specificity اضافه نمی‌کنه و باید بعد از استایلِ :open قرار بگیره تا بتونه روش رو بازنویسی کنه:

dialog {
  opacity: 0;
  transition: 1s opacity, 1s display allow-discrete;

  &:open { opacity: 1; }

  @starting-style {
    &:open { opacity: 0; }
  }
}

از دل همین ساختار، چیزی که نویسنده اسمش رو «سیستم سه‌حالته» می‌ذاره بیرون می‌آد: استایلِ «در حال خروج» (همون استایل پایهٔ dialog)، استایلِ «باز» (:open) و استایلِ «در حال ورود» (@starting-style). به گفتهٔ نویسنده مهم‌ترین چیزی که باید از این مقاله یاد بگیریم همینه؛ هر سه حالت رو می‌شه استایل داد و بهتره به ترتیبِ معکوسِ تجربهٔ کاربر تو سورس بچینیمشون.

برای پس‌زمینهٔ پشتِ دیالوگ که با ::backdrop انتخاب می‌شه هم باید ترنزیشن جدا و یه کلیدواژهٔ دیگه به اسم overlay اضافه بشه تا انیمیشنِ لایهٔ بالایی (top layer) موقع بسته شدن نرم باشه؛ نکتهٔ عجیبش اینه که overlay باید رو خودِ dialog اعمال بشه، نه رو ::backdrop. نویسنده آخر هم با یه @media (prefers-reduced-motion) برای کاربرهایی که حرکت کمتر می‌خوان، فقط محو شدنِ opacity رو نگه می‌داره و خودِ جابه‌جایی رو حذف می‌کنه.

نکات کلیدی:

• allow-discrete به‌عنوان transition-behavior تغییرِ display رو تو زمان درست انجام می‌ده
• @starting-style استایلِ لحظهٔ اولِ رندر رو تعیین می‌کنه و باید آخرِ بلوک بیاد
• ذهنیتِ «سه‌حالته»: در حال خروج، باز، در حال ورود — به ترتیب معکوس تو سورس
• برای ::backdrop باید ترنزیشن جدا و کلیدواژهٔ overlay (روی dialog) اضافه بشه
• با prefers-reduced-motion بهتره فقط حرکت حذف بشه، نه کلِ انیمیشن