O que é?
A View Transition API é uma API do navegador que facilita a criação de transições animadas e suaves entre diferentes estados de uma página ou entre diferentes páginas. Ela permite que você crie efeitos de transição que antes só eram possíveis com frameworks mais pesados ou com uma grande quantidade de código customizado.
A API foi projetada para funcionar bem com o layout da página, permitindo que os desenvolvedores animem o estado da interface de forma natural e fluida, sem precisar mexer diretamente nos detalhes de renderização.
Como Funciona?
A ideia central é simples: quando você quer transitar entre duas visualizações (views) da sua aplicação, a View Transition API tira uma “foto” do estado atual da página, aplica uma transição e, em seguida, revela a nova visualização. Esse processo é feito de forma otimizada pelo navegador, resultando em transições suaves.
Estrutura Básica
A API trabalha basicamente com três conceitos principais:
- Início da Transição: Aqui você define o início da transição, capturando o estado atual da interface.
- Mudança de Estado: Enquanto a transição está em andamento, você muda o conteúdo ou layout da página.
- Finalização da Transição: A API finaliza a transição e revela a nova interface com os elementos na nova disposição.
Vamos ao código para ilustrar isso melhor.
Exemplo prático
Suponha que você tenha duas seções em sua página e queira fazer uma transição suave entre elas ao clicar em um botão:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Transition API Demo</title>
<style>
body {
font-family: Arial, sans-serif;
transition: background-color 0.3s ease-in-out;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.view {
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.view.active {
display: block;
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="view" id="view1">View 1</div>
<div class="view" id="view2">View 2</div>
</div>
<button id="toggle">Toggle View</button>
<script>
const toggleButton = document.getElementById('toggle');
const view1 = document.getElementById('view1');
const view2 = document.getElementById('view2');
let activeView = view1;
toggleButton.addEventListener('click', () => {
document.startViewTransition(() => {
activeView.classList.remove('active');
activeView = activeView === view1 ? view2 : view1;
activeView.classList.add('active');
});
});
</script>
</body>
</html>
Como funciona este exemplo?
HTML: Temos duas visualizações (view1 e view2) que são alternadas pelo botão “Toggle View”.
CSS: As visualizações têm transições suaves de opacidade para dar a sensação de fluidez.
JavaScript: O coração do exemplo. Quando o botão é clicado, o document.startViewTransition é chamado. Dentro desse método, a classe .active é alternada entre as visualizações para iniciar a transição.
Trabalhando com CSS
Junto com a API para o Javascript, também foram introduzidos novos conceitos no CSS para lidar com essas transições.
view-transition-name
Essa propriedade especifica o nome de uma transição associada a um elemento. Ela é usada para identificar e animar elementos que mudam entre dois estados durante uma transição.
.card {
view-transition-name: card-transition;
}
O nome da transição para o elemento com a classe .card será identificado como card-transition.
view-transition-group
Essa propriedade agrupa elementos para serem animados juntos em uma transição de vista. Quando vários elementos têm o mesmo valor de view-transition-group, eles serão tratados como uma unidade na transição, permitindo que sejam animados simultaneamente de maneira coordenada.
.menu-item {
view-transition-group: menu-items;
}
Todos os elementos com a classe .menu-item que têm o mesmo valor de grupo serão animados juntos.
view-transition-keyframes
Essa propriedade permite definir os keyframes (quadro a quadro) das animações associadas a uma transição. Isso possibilita personalizar a animação, incluindo o tempo, as transformações e outros efeitos.
.card {
view-transition-keyframes: @keyframes fade-in;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Custom States
Durante as transições, o CSS introduz automaticamente classes para diferentes estados dos elementos. Isso permite que você estilize os elementos em diferentes fases da transição:
view-transition-image-pair: Essa classe identifica os elementos que estão em transição (por exemplo, uma imagem que está se movendo de um estado para outro).view-transition-old: Refere-se ao estado anterior de um elemento antes da transição.view-transition-new: Refere-se ao novo estado de um elemento após a transição.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
view-transition-name: example-transition;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
}
.box-large {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="toggleSize()">Toggle Size</button>
<script>
function toggleSize() {
document.querySelector('.box').classList.toggle('box-large');
document.startViewTransition();
}
</script>
</body>
</html>
Neste exemplo, a caixa vermelha (com a classe .box) aumenta de tamanho e muda de cor para azul ao ser clicada. A função startViewTransition() inicia a transição suave entre os dois estados.
Pontos Importantes
Desempenho: A View Transition API é otimizada pelo próprio navegador, garantindo que as transições sejam rápidas e suaves.
Compatibilidade: Como qualquer nova tecnologia, a compatibilidade pode variar entre navegadores. Verifique a disponibilidade nos navegadores que você planeja suportar.