/** * Transição entre módulos (View Transitions entre documentos). * * Cada módulo é uma página própria, por isso mudar de um para outro é um * carregamento completo — e a navbar (igual nas duas) era reconstruída, com o * logótipo a piscar até o PNG descodificar. Com isto, o browser mantém no ecrã * o desenho da página antiga até a nova estar pronta e só depois faz a troca. * * O logótipo tem nome próprio: durante a transição fica parado o ANTIGO (já * desenhado) e o novo fica escondido por baixo, por isso nunca pisca. O resto da * navbar (ícones + controlos) faz um fade curto, para o que muda (o ícone rosa * do módulo ativo) não "saltar". Só muda o conteúdo por baixo. * * IMPORTANTE: para isto não escalar nem deslizar, a navbar tem de ter EXATAMENTE * a mesma caixa em todos os módulos: margens laterais iguais (20px, em todas as * larguras), scrollbar-gutter: stable e os mesmos controlos, pela mesma ordem. * * Tem de estar carregado (no ) em AMBAS as páginas para haver transição. * Só as páginas de módulos o usam de propósito — a landing page não, por isso * landing → módulo continua como estava. Browsers sem suporte (ex.: Firefox) * ignoram tudo isto e ficam com o comportamento normal. */ @view-transition { navigation: auto; } .nn-navbar { view-transition-name: nn-navbar; } .nn-navbar-brand { view-transition-name: nn-logo; } /* conteúdo da página e navbar (ícones + controlos): fade curto (o padrão é 0.25s). O que muda na navbar entre módulos (o ícone rosa do módulo ativo) faz fade em vez de "saltar". */ ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(nn-navbar), ::view-transition-old(nn-navbar), ::view-transition-new(nn-navbar) { animation-duration: 0.15s; } /* logótipo: o antigo (já desenhado) fica parado e o novo só aparece no fim — nunca fica em branco enquanto o PNG da página nova descodifica. Está fora da imagem da navbar (tem nome próprio). */ ::view-transition-group(nn-logo) { animation: none; } ::view-transition-old(nn-logo) { animation: none; } ::view-transition-new(nn-logo) { animation: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }