Com View Transitions API a gente consegue fazer com que alguns elementos especificos na tela façam uma transição da página atual para a próxima página. Tem como usar essa API tanto para animar elementos na mesma url o que seria em um SPA, e principalmente o que vou abordar neste tutoial é como aplicar view transitions em um site multi-páginas.
Vamos criar um exemplo prático simples com duas páginas que têm uma imagem em comum, e vamos fazer essa imagem transicionar suavemente entre as páginas.
Demo
Ao clicar no link abaixo, você irá para uma outra página que terá um link para voltar a página inicial
clique aqui para navegarCódigo do demo
Vou explicar o demo acima e finalizar pois arriscamos alongar d+ este tutorial
Passo Zero - ativar a transição de páginas
Vamos criar um arquivo chamado transicao-de-pagina.css e adicionar o seguinte código:
@view-transition {
navigation: auto;
}
Só de aplicar essa nova regra de CSS, já podemos obter uma transição padrão de fade-in e fade-out ao navegar entre as páginas.
Porém não queremos um fade-in e fade-out, queremos algo mais envolvente com transforms também. Vamos customizar a transição padrão.
Passo 1 - qual é o estilo ao entrar e o estilo ao sair
A view transition cria um grupo contem 2 items que compartilham o mesmo nome, um é o novo estado e o outro é o estado antigo. Em inglês:
::view-transition-old(root) {
/* estilo do elemento saindo da tela */
}
::view-transition-new(root) {
/* estilo do elemento entrando na tela */
}
aquele root ali, é o nome da cama de transição padrão, root pega todo a página
O estilo que vai em ::view-transition-old(nome) é referente a animação do elemento saindo da tela
O estilo que vai em ::view-transition-new(nome) é referente a animação do elemento entrnaod na tela
O código fica assim, já com as keyframes customizadas que criei:
::view-transition-old(root) {
animation-name: fade-out;
}
::view-transition-new(root) {
animation-name: fade-in;
}
@keyframes fade-in {
from {
opacity: 0;
transform: scale(1.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fade-out {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.5);
}
}
Passo 3 - estilos compartilhados num grupo de transição
Agora que a gente já sabe que precisa ativar a transição de páginas com @view-transition { navigation: auto; } e já sabemos que para fazer o efeito de entrada e saida, basta selecionar os pseudo-elementos ::view-transition-old(nome) e ::view-transition-new(nome) e aplicar as animações. Tem uma outro pseudo selector que é muito relevante! É o ::view-transition-group(root).
Com o view-transition-group, digamos que você tem 1 regra de CSS que se aplica tanto ao new quanto ao old, em vez de usar dois seletores, vc pode usar o ::view-transition-group(nome) e aplicar estilos que são compartilhados tanto pelo new quanto old.
Vamos usar neste demo, para declarar o tempo de duração da transição.
::view-transition-group(root) {
animation-duration: 1s;
}
Passo 3 - dar nome a transições
Ao trabalhar com view transitions, você precisa dar nome aos elementos que terão uma transição.
Para isso, usamos a propriedade view-transition-name: nome-do-elemento
acontece, que o `view-transition-name: root` é o padrão que seleciona toda a página, e toda página pode ser animada em conjunto.
Porém é possível e esperar que apenas determinados elementos da página sejam animados, para isso basta selecionar o elemento e declarar `view-transition-name`, assim nos exemplos acima onde você viu:
- ::view-transition-group(nome)
- ::view-transition-new(nome)
- ::view-transition-old(nome)
Conclusão
Tem mais pano pra manga, mas queria deixar este demo básico aqui pois apliquei na página inicial do tbbc.app e gostei muito da facilidade e principalmente por não precisar de JavaScript. Porém essa View Transition API tem diversos métodos disponíveis no JavaScript que dão muito poder para controlar as transições e espero compartilhar algo sobre ela em breve aqui também!