(lkPageIn), из-за чего на переходе появлялась светлая щель. Имя у панели одно на странице (на странице один такой заголовок), поэтому конфликта имён нет; у админских заголовков имени нет намеренно — на части страниц их несколько, а повторяющееся имя отменило бы весь переход. */ body.qq-cab .er-page-hero, body.qq-hero .ud-head { view-transition-name: shell-panel; } /* Шапка в переходе неподвижна: старый снимок скрыт, новый без анимации, и она поверх всего — иначе прокрученный старый контент заезжал бы на неё. */ body.qq-cab .navbar { view-transition-name: shell-nav; } ::view-transition-old(shell-nav) { display: none; } ::view-transition-new(shell-nav) { animation: none; } ::view-transition-group(shell-nav) { z-index: 10; } ::view-transition-group(shell-panel) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1); } /* Карточка дашборда, раскрывающаяся в панель (shell-motion.js): снимки старой и новой панели разного размера, поэтому им нужна заливка по размеру группы и взаимное наложение вместо исчезновения одного перед появлением другого — иначе посреди раскрытия мелькает пустота. */ ::view-transition-old(shell-panel), ::view-transition-new(shell-panel) { height: 100%; width: 100%; object-fit: cover; overflow: clip; mix-blend-mode: normal; } /* Переход по ссылке меню (тип qq-from-menu ставит shell-motion.js): у новой панели нет карточки-источника, из которой она могла бы вырасти, поэтому она раскрывается со стороны вкладки — вправо по меню справа налево, влево слева направо, как карточка дашборда. Это обрезка (clip-path), а не растяжение снимка: панель всё время резкая, а в конце совпадает с живой без скачка. Без направления (вкладка вне меню) — мягкое опускание из-под шапки. Отдельными блоками — по правилу для списка типов. */ html:active-view-transition-type(qq-from-menu)::view-transition-new(shell-panel) { height: auto; object-fit: fill; transform-origin: 50% 0; animation: shellPanelDrop 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both; } html:active-view-transition-type(qq-from-menu):active-view-transition-type(qq-forward)::view-transition-new(shell-panel) { animation: shellPanelFromRight 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both; } html:active-view-transition-type(qq-from-menu):active-view-transition-type(qq-back)::view-transition-new(shell-panel) { animation: shellPanelFromLeft 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both; } @keyframes shellPanelDrop { from { opacity: 0; transform: translateY(-14px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes shellPanelFromRight { from { opacity: 0.2; clip-path: inset(0 0 0 78% round 18px); } 40% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); } } @keyframes shellPanelFromLeft { from { opacity: 0.2; clip-path: inset(0 78% 0 0 round 18px); } 40% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); } } /* ── Контент и направление ── По умолчанию контент мягко проявляется. Если известно направление (shell-motion.js ставит тип qq-forward / qq-back по порядку вкладок меню), старая страница уходит в сторону, откуда ушёл пользователь, а новая приходит с противоположной: переход читается как движение по ряду вкладок, а не как случайная подмена. Сдвиг небольшой (14px) — это подсказка направления, а не слайдер. Без поддержки типов браузер просто пропускает правила и остаётся на мягком появлении. */ ::view-transition-new(lk-main) { animation: shellPageIn 0.38s cubic-bezier(0.22, 0.8, 0.3, 1) both; } html:active-view-transition-type(qq-forward)::view-transition-old(lk-main) { animation: shellOutLeft 0.2s cubic-bezier(0.4, 0, 1, 1) both; } html:active-view-transition-type(qq-forward)::view-transition-new(lk-main) { animation: shellInFromRight 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both; } html:active-view-transition-type(qq-back)::view-transition-old(lk-main) { animation: shellOutRight 0.2s cubic-bezier(0.4, 0, 1, 1) both; } html:active-view-transition-type(qq-back)::view-transition-new(lk-main) { animation: shellInFromLeft 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both; } /* Всё остальное (фон-меш) в переходе одинаково и не должно мерцать. */ ::view-transition-group(root) { animation-duration: 0.25s; } @keyframes shellPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes shellOutLeft { to { opacity: 0; transform: translateX(-14px); } } @keyframes shellOutRight { to { opacity: 0; transform: translateX(14px); } } @keyframes shellInFromRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } @keyframes shellInFromLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } /* ── Проявление блоков с данными ── Класс qq-reveal ставит shell-motion.js один раз, когда контейнер впервые получил настоящее содержимое вместо скелетона/«Загрузка…». backwards, а не both: после анимации у блока не остаётся ни прозрачности, ни transform — иначе он навсегда становился бы отдельным слоем и подсказки (z-index) внутри него оказывались бы под соседями. Каскад — небольшой задержкой по порядку блоков сверху вниз. */ @keyframes shellReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.qq-cab .qq-reveal { animation: shellReveal 0.42s cubic-bezier(0.22, 0.8, 0.3, 1) backwards; } body.qq-cab #timelineHost.qq-reveal { animation-delay: 0.04s; } body.qq-cab #deadlinesContainer.qq-reveal { animation-delay: 0.08s; } body.qq-cab #reportsContainer.qq-reveal { animation-delay: 0.12s; } body.qq-cab #successContainer.qq-reveal { animation-delay: 0.16s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(shell-panel) { animation: none; } ::view-transition-new(lk-main) { animation: none; } /* Отдельными правилами: браузер без :active-view-transition-type отбросил бы весь список целиком, а с ним и правило выше. */ html:active-view-transition-type(qq-forward)::view-transition-old(lk-main) { animation: none; } html:active-view-transition-type(qq-forward)::view-transition-new(lk-main) { animation: none; } html:active-view-transition-type(qq-back)::view-transition-old(lk-main) { animation: none; } html:active-view-transition-type(qq-back)::view-transition-new(lk-main) { animation: none; } html:active-view-transition-type(qq-from-menu)::view-transition-new(shell-panel) { animation: none; } html:active-view-transition-type(qq-from-menu):active-view-transition-type(qq-forward)::view-transition-new(shell-panel) { animation: none; } html:active-view-transition-type(qq-from-menu):active-view-transition-type(qq-back)::view-transition-new(shell-panel) { animation: none; } body.qq-cab .qq-reveal { animation: none; } } @media print { body.qq-cab { background: #ffffff; } /* Фоновые слои кабинета в печати не нужны, а вредят: `fixed`-слой повторяется на каждой странице, и зерно (SVG feTurbulence) Chromium растеризует в полноразмерное растровое изображение с альфа-каналом — около 2 МБ на страницу. PDF-отчёт из 8 страниц разрастался с ~1,4 до ~16 МБ и рендерился в разы дольше. */ body.qq-cab::after, body.qq-cab .shell-aurora { display: none !important; } html { background: #ffffff !important; } }