/* * Aurora — Page Transitions * Переходы между страницами. Эффект выбирается в панели: * AdminCP → Templates → Aurora → Transitions * * Настройки приходят атрибутами на (их ставит header.tpl): * * * ВАЖНО про схему работы: * Анимация ВХОДА играется чистым CSS сразу при загрузке страницы, без участия JS. * Иначе новая страница успевала мигнуть до того, как скрипт её накроет. * JS отвечает только за УХОД — добавляет класс .tr-leave перед переходом. * * Анимируется .tr-content (контейнер контента), навбар и футер не двигаются. * Оверлейные эффекты (curtain / blocks) перекрывают весь экран и * приходят готовой разметкой из header.tpl — чтобы существовать с первого кадра. */ /* ---------- Тайминги ---------- */ :root { --tr-out: 260ms; /* уход старой страницы */ --tr-in: 450ms; /* приход новой */ --tr-ov: 820ms; /* полный цикл оверлея */ --tr-ease-in: cubic-bezier(.4, 0, 1, 1); --tr-ease-out: cubic-bezier(.16, 1, .3, 1); --tr-accent: #00d4ff; --tr-accent2: #7b61ff; } html[data-tr-speed="fast"] { --tr-out: 180ms; --tr-in: 300ms; --tr-ov: 560ms; } html[data-tr-speed="slow"] { --tr-out: 400ms; --tr-in: 700ms; --tr-ov: 1150ms; } /* ---------- Общее ---------- */ /* Во время ухода блокируем повторные клики, чтобы не запустить второй переход поверх первого. */ html.tr-leave body { cursor: progress; } html.tr-leave .tr-content { pointer-events: none; } /* ---------- Внутристраничный переход ---------- Вкладки профиля, пагинация и сортировка перезагружают страницу, но визуально это та же самая страница — анимация входа там не нужна. Класс вешает инлайн-скрипт в ещё до первой отрисовки. */ html.tr-noanim #tr-overlay { display: none !important; } html.tr-noanim .tr-content, html.tr-noanim .tr-content > *, html.tr-noanim #tr-overlay * { animation: none !important; } /* Оверлей — общий контейнер для curtain / blocks. Разметка приходит из header.tpl, по умолчанию скрыт. */ #tr-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; } /* ============================================================ 1. FADE & SLIDE ============================================================ */ html[data-tr="fade"] .tr-content { animation: trFadeIn var(--tr-in) var(--tr-ease-out) both; } html[data-tr="fade"].tr-leave .tr-content { animation: trFadeOut var(--tr-out) var(--tr-ease-in) forwards; } @keyframes trFadeIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes trFadeOut { to { opacity: 0; transform: translateY(-16px); } } /* ============================================================ 2. CURTAIN — шторка с названием сайта ============================================================ */ html[data-tr="curtain"] #tr-overlay { display: block; background: linear-gradient(120deg, var(--tr-accent), var(--tr-accent2) 55%, var(--tr-accent)); /* Приход: шторка стоит на экране и уезжает вправо, открывая страницу. Играет сразу при загрузке — оверлей есть в разметке с первого кадра. */ animation: trCurtainOut calc(var(--tr-ov) * .55) cubic-bezier(.76, 0, .24, 1) forwards; } /* Уход: шторка въезжает слева и замирает, закрыв экран */ html[data-tr="curtain"].tr-leave #tr-overlay { animation: trCurtainIn calc(var(--tr-ov) * .5) cubic-bezier(.76, 0, .24, 1) forwards; } html[data-tr="curtain"] .tr-content { animation: trZoomIn var(--tr-in) var(--tr-ease-out) both; } @keyframes trCurtainIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes trCurtainOut { from { transform: translateX(0); } to { transform: translateX(100%); } } /* Надпись на шторке */ #tr-overlay .tr-mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; text-align: center; padding: 0 20px; color: rgba(4, 18, 26, .92); opacity: 0; } html[data-tr="curtain"] #tr-overlay .tr-mark { animation: trMarkOut calc(var(--tr-ov) * .35) ease forwards; } html[data-tr="curtain"].tr-leave #tr-overlay .tr-mark { animation: trMarkIn calc(var(--tr-ov) * .5) ease forwards; } @keyframes trMarkIn { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } } @keyframes trMarkOut { from { opacity: 1; } to { opacity: 0; } } /* ============================================================ 3. BLUR ZOOM ============================================================ */ html[data-tr="blur"] .tr-content { animation: trBlurIn var(--tr-in) var(--tr-ease-out) both; } html[data-tr="blur"].tr-leave .tr-content { animation: trBlurOut var(--tr-out) var(--tr-ease-in) forwards; } @keyframes trBlurIn { from { opacity: 0; filter: blur(18px); transform: scale(.9); } to { opacity: 1; filter: blur(0); transform: none; } } @keyframes trBlurOut { to { opacity: 0; filter: blur(14px); transform: scale(1.06); } } @keyframes trZoomIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } /* ============================================================ 4. STAGGER — каскад Полоска загрузки убрана намеренно: она показывалась, пока грузится следующая страница, поэтому на тяжёлых страницах (панель, магазин) висела заметно дольше, чем на лёгких, и эффект выглядел разным. ============================================================ */ /* Приход: прямые дети контейнера всплывают один за другим */ html[data-tr="stagger"] .tr-content > * { animation: trStaggerIn var(--tr-in) var(--tr-ease-out) both; } html[data-tr="stagger"] .tr-content > *:nth-child(1) { animation-delay: 20ms; } html[data-tr="stagger"] .tr-content > *:nth-child(2) { animation-delay: 80ms; } html[data-tr="stagger"] .tr-content > *:nth-child(3) { animation-delay: 140ms; } html[data-tr="stagger"] .tr-content > *:nth-child(4) { animation-delay: 200ms; } html[data-tr="stagger"] .tr-content > *:nth-child(5) { animation-delay: 250ms; } html[data-tr="stagger"] .tr-content > *:nth-child(n+6) { animation-delay: 290ms; } /* Уход перебивает каскад — иначе элементы будут доигрывать приход */ html[data-tr="stagger"].tr-leave .tr-content > * { animation: none; } html[data-tr="stagger"].tr-leave .tr-content { animation: trStaggerOut var(--tr-out) var(--tr-ease-in) forwards; } @keyframes trStaggerIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes trStaggerOut { to { opacity: 0; transform: translateY(-10px); } } /* ============================================================ 5. BLOCKS — блочная развёртка (Minecraft) ============================================================ */ html[data-tr="blocks"] #tr-overlay { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(6, 1fr); } /* В режиме блоков надпись не нужна — и, оставшись, она заняла бы ячейку сетки и сдвинула все блоки. */ html[data-tr="blocks"] #tr-overlay .tr-mark { display: none; } #tr-overlay .tr-block { background: linear-gradient(135deg, var(--tr-accent), #0a7ea8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transform: scale(0); opacity: 0; } /* Приход: блоки стоят на экране и схлопываются, открывая страницу */ html[data-tr="blocks"] #tr-overlay .tr-block { animation: trBlockOut calc(var(--tr-ov) * .45) ease forwards; } /* Уход: блоки вырастают и заполняют экран */ html[data-tr="blocks"].tr-leave #tr-overlay .tr-block { animation: trBlockIn calc(var(--tr-ov) * .45) ease forwards; } html[data-tr="blocks"] .tr-content { animation: trZoomIn var(--tr-in) var(--tr-ease-out) both; } /* Разброс задержек — чтобы блоки появлялись вразнобой, а не стеной. Считаем на CSS, а не на JS: анимация входа стартует до загрузки скрипта. */ html[data-tr="blocks"] #tr-overlay .tr-block:nth-child(3n) { animation-delay: 60ms; } html[data-tr="blocks"] #tr-overlay .tr-block:nth-child(5n) { animation-delay: 130ms; } html[data-tr="blocks"] #tr-overlay .tr-block:nth-child(7n) { animation-delay: 200ms; } html[data-tr="blocks"] #tr-overlay .tr-block:nth-child(11n) { animation-delay: 90ms; } html[data-tr="blocks"] #tr-overlay .tr-block:nth-child(13n) { animation-delay: 240ms; } html[data-tr="blocks"] #tr-overlay .tr-block:nth-child(17n) { animation-delay: 160ms; } @keyframes trBlockIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes trBlockOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } } /* ============================================================ Доступность: у кого в системе отключены анимации — мгновенный переход. Ставим 1мс, а не 0, чтобы логика ухода не зависла в ожидании. ============================================================ */ @media (prefers-reduced-motion: reduce) { html[data-tr] .tr-content, html[data-tr] .tr-content > *, html[data-tr] #tr-overlay, html[data-tr] #tr-overlay * { animation-duration: 1ms !important; animation-delay: 0ms !important; } }