Como ele é
Lembra abrir uma foto no app de galeria do celular: em vez de a tela piscar, a miniatura cresce até ocupar o lugar dela. A galeria mostra cards com foto de cantos arredondados, categoria, ano e título. No clique, a foto se estica até virar a imagem grande do detalhe e o título viaja até o cabeçalho, enquanto selo de categoria, texto, local, ano e botão de voltar surgem logo depois, subindo de leve. Ao voltar, o caminho se inverte e a foto encolhe de volta ao card de origem. Ao passar o mouse, a foto do card cresce um pouco.
Você pode estar procurando isto se pediu algo assim
- card que se abre e vira a página de detalhe sem piscar a tela
- transição tipo app de celular entre a lista e o produto
- foto da galeria que cresce até ocupar a tela quando clico
- portfólio em que o projeto abre com uma animação contínua
- catálogo de produtos com transição suave para a página do item
- aquele efeito em que a imagem viaja de um lugar para o outro
Também chamado de
- view transition
- View Transitions API
- shared element transition
- transição de elemento compartilhado
- card expand
- FLIP animation
- transição de página
Quando usar
- Portfólio com página de detalhe para cada projeto
- Catálogo de produtos que abre a ficha do item
- Lista de cases, artigos ou imóveis com vista de detalhe
- Galerias em que manter o contexto entre lista e detalhe ajuda a navegar
Quando evitar
- Quando cada detalhe precisa de endereço próprio: a troca acontece dentro do componente, sem mudar de rota
- Listas longas e densas, como tabelas, em que a pessoa compara itens lado a lado
Como pedir para a sua IA
Crie uma galeria de cards que se expande para a vista de detalhe com a View Transitions API: a foto e o título do card viajam até o detalhe, com reserva em FLIP, Esc para voltar, foco que retorna ao card e troca instantânea para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Translado
Translado funciona em navegadores sem View Transitions API?
Funciona. Translado verifica se o navegador tem a View Transitions API; quando não tem, faz a mesma ideia com animação FLIP pela Web Animations API, medindo a foto e o título antes e depois da troca. A prop forceFallback força esse modo para testes. O nome de transição só vai para o card ativo, o que evita conflitos na página.
Translado funciona pelo teclado?
Funciona. Cada card de Translado é um botão: Enter ou Espaço abrem o detalhe, e o foco vai para o botão de voltar. Esc ou esse botão fecham, e o foco retorna ao card de origem, o que mantém a posição de quem navega por teclado ou com leitor de tela. Com movimento reduzido, a troca é instantânea, sem animação.
Translado muda a URL ou a rota no Nuxt?
Não. Em Translado, a galeria e o detalhe vivem dentro do próprio componente, sem trocar de rota nem de endereço. Se cada item precisa de página própria no Nuxt, peça à IA para levar a mesma transição para a navegação entre rotas, mantendo o nome de transição só no card clicado.
