/** * xco-page-transition.css * ----------------------------------------------------------------- * محو/نمایانِ نرمِ opacity روی body، بین دو ناوبریِ کامل صفحه (سایت هنوز * کاملاً سنتی/full-page-load است - این صرفاً یک لایه‌ی سبکِ CSS روی همان * ناوبری است، نه تبدیل به SPA). * * منطق کامل (کِی و کجا کلاس xco-pt-hidden اضافه/حذف می‌شود) در دو جای * دیگر است: * - app/Views/layout/header.php: اسکریپت inline بالای که پیش از * اولین paint، کلاس را روی اضافه می‌کند (صفحه‌ی تازه با * opacity:0 شروع می‌شود). * - public/assets/js/xco-page-transition.js: با pageshow/pagehide همان * کلاس را برمی‌دارد/برمی‌گرداند تا هم ورود به صفحه، هم لحظه‌ی خروج از * آن (کلیک لینک، ارسال فرم، دکمه‌ی Back/Forward)، به‌جای یک پرش خشک، * یک محو/نمایانِ ~۱۸۰ میلی‌ثانیه‌ای شبیه اپ باشد. * * اینجا فقط ظاهر/تایمینگ همان ترنزیشن، به‌علاوه‌ی یک failsafe مستقل از * جاوااسکریپت، تعریف می‌شود. */ body { opacity: 1; /* ease-out: شروع سریع‌تر و پایانِ نرم‌تر - برای محو/نمایانِ خیلی کوتاه (کمتر از ۲۰۰ میلی‌ثانیه) طبیعی‌تر از ease-in-out حس می‌شود. */ transition: opacity .18s ease-out; } html.xco-pt-hidden body { opacity: 0; /* * Failsafe خالصِ CSS - کاملاً مستقل از اجرای درستِ xco-page-transition.js: * اگر به هر دلیلی (خطای جاوااسکریپتِ دیگری در صفحه که اجرای بقیه‌ی * اسکریپت‌ها را متوقف کند، بلاک‌شدن فایل توسط افزونه/شبکه، و ...) کلاس * xco-pt-hidden هرگز توسط JS برداشته نشود، این انیمیشن بعد از ۶۰۰ * میلی‌ثانیه خودش opacity را به ۱ برمی‌گرداند. یعنی بدترین حالتِ ممکن * یک تأخیرِ ۶۰۰ میلی‌ثانیه‌ای در نمایشِ صفحه است، نه یک صفحه‌ی برای * همیشه نامرئی. این تأخیر عمداً بیشتر از تایمینگِ عادیِ pageshow * (که در عمل خیلی زودتر اجرا می‌شود) انتخاب شده تا در حالت عادی هرگز * دیده نشود. */ animation: xco-pt-failsafe-reveal 0s .6s forwards; } @keyframes xco-pt-failsafe-reveal { to { opacity: 1; } } /* کاربرانی که «کاهش حرکت» را در سیستم‌عامل/مرورگرشان فعال کرده‌اند - کل ترنزیشن (و حتی حالتِ محوِ اولیه) کاملاً غیرفعال می‌شود؛ صفحه همیشه با opacity کامل نمایش داده می‌شود. */ @media (prefers-reduced-motion: reduce) { body { transition: none; } html.xco-pt-hidden body { opacity: 1; animation: none; } }