‏انیمیشن ورود و خروج popover با CSS خالص

این مقاله قسمت دوم از سری سه‌قسمتیِ «In-N-Out Animations» از کریس کویره؛ قسمت اول دربارهٔ انیمیشن‌دار کردنِ ورود و خروجِ المان بود و این‌بار سراغ popover رفته. به گفتهٔ نویسنده، popoverها با یه دکمهٔ popovertarget خودکار باز و بسته می‌شن (یعنی از display: none به display: block می‌رن)، ولی هدف اینه که این تغییر رو انیمیشن بدیم.

نکتهٔ محوری اینه که همون سیستم سه‌مرحله‌ای (که نویسنده بهش می‌گه سیستم ۳-۲-۱) بدون دردسر روی popover هم منتقل می‌شه. ایده اینه که هر سه حالت رو به‌ترتیب استایل بدی، طوری که استاِیل «در مسیر ورود» به‌خاطر specificity بر استایل حالت باز غلبه کنه: حالت بسته، حالت باز، و بعد @starting-style.

برای popover از شبه‌کلاس خاص :popover-open استفاده می‌شه و این‌بار به‌جای هر پراپرتی، opacity و rotate ترنزیشن داده می‌شن. نکتهٔ کلیدی برای اینکه خروج هم انیمیشن بخوره، اضافه‌کردن display و overlay با allow-discrete به transition هست:

[popover] {
  --timing: .66s;
  transition:
    var(--timing) opacity,
    var(--timing) rotate,
    var(--timing) display allow-discrete,
    var(--timing) overlay allow-discrete;

  &:not(:popover-open) { opacity: 0; rotate: 10deg; }
  &:popover-open { opacity: 1; rotate: 3deg; }
  @starting-style {
    &:popover-open { opacity: 0; rotate: -3deg; }
  }
}

نویسنده تأکید می‌کنه که چون اینجا حرکت به صفحه اضافه می‌کنیم، باید حواسمون به کاربرایی باشه که حرکت نمی‌خوان. برای همین داخل @media (prefers-reduced-motion: reduce) مقدار rotate رو حذف می‌کنیم و فقط تغییر opacity رو نگه می‌داریم، چون تغییر شفافیت مشکلی نداره.

در آخر یه نکتهٔ سافاری هم اشاره شده: anchor موقعیت‌دهیِ popover موقع خروج در سافاری از دست می‌ره (احتمالاً باگ)، برای همین تو دموی نویسنده anchor رو صریح مشخص کردن تا درست بشه. همچنین در قسمت اول برای هم باید inset: 0 رو صریح تنظیم می‌کردن تا مشکل سافاری حل بشه.

نکات کلیدی:

• انتقال بی‌دردسرِ سیستم سه‌مرحله‌ای از dialog به popover
• استفاده از :popover-open و ترنزیشن روی opacity و rotate
• افزودن display و overlay با allow-discrete برای انیمیشن خروج
• حذف چرخش داخل prefers-reduced-motion و نگه‌داشتن فقط تغییر opacity
• مشخص‌کردن صریح anchor برای رفع باگ خروج در سافاری