/** * Transisi halus antar-halaman. * * Sumber utama: View Transitions API bawaan browser (Chrome/Edge terbaru, * Safari 18.2+) lewat @view-transition { navigation: auto } — otomatis * meng-crossfade seluruh dokumen setiap kali pindah halaman biasa ( * atau submit form), tanpa perlu JS sama sekali. * * Untuk browser yang belum mendukungnya (mis. Firefox), page-transition.js * menambahkan class "pt-fallback" ke dan memakai crossfade manual * lewat class pt-ready / pt-leaving di bawah ini. * * File ini dipakai bersama di layout admin, murid, maupun guest supaya * konsisten di semua sisi (superadmin, admin sekolah, guru, kepala * sekolah/waka, dan murid). */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 160ms; animation-timing-function: ease-in; } ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); } /* Bottom navbar mobile (admin & murid) SENGAJA dikeluarkan dari transisi root: dikasih nama sendiri lalu animasinya dimatikan, supaya dia selalu tetap terlihat & tidak ikut fade sementara konten halaman lain loading. Sidebar & topbar admin (desktop) dapat perlakuan sama supaya menu & header tetap tampil solid saat berpindah halaman -- yang crossfade cuma konten utamanya (root, minus ketiga elemen ini). */ .admin-bottomnav, .bottom-nav { view-transition-name: pt-bottomnav; } .admin-sidebar { view-transition-name: pt-sidebar; } .admin-topbar { view-transition-name: pt-topbar; } ::view-transition-old(pt-bottomnav), ::view-transition-new(pt-bottomnav), ::view-transition-old(pt-sidebar), ::view-transition-new(pt-sidebar), ::view-transition-old(pt-topbar), ::view-transition-new(pt-topbar) { animation: none; } /* ── Fallback manual (browser tanpa dukungan View Transitions API) ── Yang di-fade cuma pembungkus konten halaman ([data-pt-fade] --

di admin, .murid-container di murid), BUKAN dan bukan seluruh layout. Jadi bottom navbar, sidebar admin (aside.admin-sidebar), dan topbar admin (header.admin-topbar) -- yang letaknya di luar pembungkus itu -- selalu tampil solid, termasuk saat halaman lagi loading/pindah. */ html.pt-fallback [data-pt-fade] { opacity: 0; } html.pt-fallback [data-pt-fade].pt-ready { opacity: 1; transition: opacity 180ms ease; } html.pt-fallback [data-pt-fade].pt-leaving { opacity: 0 !important; transition: opacity 150ms ease !important; } @media (prefers-reduced-motion: reduce) { html.pt-fallback [data-pt-fade], html.pt-fallback [data-pt-fade].pt-ready, html.pt-fallback [data-pt-fade].pt-leaving { transition: none !important; opacity: 1 !important; } ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(pt-bottomnav), ::view-transition-new(pt-bottomnav), ::view-transition-old(pt-sidebar), ::view-transition-new(pt-sidebar), ::view-transition-old(pt-topbar), ::view-transition-new(pt-topbar) { animation: none !important; } }