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

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

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

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

  &:open {
    opacity: 1;
  }
}

برای محو شدن موقع باز شدن، چون اولین باری که دیالوگ رندر می‌شه استایل‌های :open فوری اعمال می‌شن و دیگه چیزی برای انیمیت کردن نمی‌مونه، باید حالت قبل از انیمیشن رو دقیق مشخص کنیم. این کار با @starting-style انجام می‌شه که می‌گه «موقع اولین رندر، عنصر در واقع این استایل‌ها رو داره». نکته‌ی مهمی که نویسنده تاکید می‌کنه اینه که @starting-style باید آخر بلوک بیاد، چون خودش specificity اضافه نمی‌کنه و فقط با اومدن بعد از :open می‌تونه اون رو بازنویسی کنه.

مهم‌ترین درسی که نویسنده می‌خواد یادمون بمونه «سیستم سه‌حالته»ست: استایل «در راه خروج» (روی خود dialog)، استایل «باز» (:open)، و استایل «در راه ورود» (داخل @starting-style). نویسنده پیشنهاد می‌کنه این سه حالت رو با ترتیب معکوس منبع بچینی، و به‌جای اینکه استایل‌دادن به هر سه حالت رو یه بار اضافی ببینی، ازش به‌عنوان فرصتی برای طراحی استفاده کنی؛ مثلاً حالت ورود بزرگ‌تر (scale: 1.1) و حالت خروج کوچیک‌تر (scale: 0.9) باشه.

برای بک‌دراپ، یعنی پس‌زمینه‌ی پشت دیالوگ که با ::backdrop انتخاب می‌شه، باید ترنزیشن جدا، هر سه حالت استایل، و یه کلیدواژه‌ی خاص دیگه به اسم overlay رو اضافه کنیم. نکته‌ی عجیبش اینه که overlay در واقع یه پراپرتی واقعی نیست و به انیمیشن‌های لایه‌ی بالایی ربط داره؛ نویسنده می‌گه باید روی خود dialog اعمالش کنی نه ::backdrop، با اینکه فقط روی بک‌دراپ اثر می‌ذاره، وگرنه بک‌دراپ نرم محو نمی‌شه.

نویسنده آخر یه @media با prefers-reduced-motion: reduce هم اضافه می‌کنه و عمداً انیمیشن opacity رو نگه می‌داره و فقط حرکت رو حذف می‌کنه، که به نظرش روح درست این تنظیم کاربره. جمع‌بندیش اینه که اینا اساساً ساده‌ن ولی جزئیاتش (مخصوصاً ترتیب منبع) راحت اشتباه می‌شه و آدم فکر می‌کنه اصلاً نمی‌شه، در حالی که می‌شه.

نکات کلیدی:

• عنصر به‌صورت پیش‌فرض display: none‌ـه و موقع باز شدن خودش block می‌شه
• allow-discrete به‌عنوان transition-behavior زمان درست تغییر display رو تنظیم می‌کنه
• @starting-style حالت قبل از باز شدن رو مشخص می‌کنه و باید آخر بلوک بیاد تا بتونه :open رو بازنویسی کنه
• سیستم سه‌حالته (در راه خروج، باز، در راه ورود) رو با ترتیب معکوس منبع بچین
• برای بک‌دراپ به ترنزیشن جدا، هر سه حالت، و کلیدواژه‌ی overlay روی dialog نیاز داری
• با prefers-reduced-motion فقط حرکت رو حذف کن و محو شدن opacity رو نگه دار