As transições de visualização são transições animadas e perfeitas entre diferentes estados da IU de uma página da Web ou de um aplicativo. A API View Transitions foi projetada para permitir a criação desses efeitos de maneira mais direta e eficiente do que era possível antes. A API oferece vários benefícios em relação às abordagens anteriores de JavaScript, incluindo:
- Experiência do usuário aprimorada:transições suaves e dicas visuais guiam os usuários pelas mudanças na interface, fazendo com que a navegação pareça natural e menos desagradável.
- Continuidade visual:manter um senso de continuidade entre visualizações reduz a carga cognitiva e ajuda os usuários a se manterem orientados dentro do aplicativo.
- Desempenho:a API tenta usar o menor número possível de recursos da linha de execução principal, o que cria animações mais suaves.
- Estética moderna:as transições aprimoradas contribuem para uma experiência do usuário refinada e envolvente.
Esta postagem faz parte de uma série (em inglês) que discute como as empresas de e-commerce melhoraram o site usando os novos recursos de CSS e IU. Neste artigo, descubra como algumas empresas implementaram e se beneficiaram da API View Transitions.
redBus
O redBus sempre tentou criar o máximo possível de paridade entre as experiências nativa e da Web. Antes da API View Transitions, a implementação dessas animações nos recursos da Web era um desafio. No entanto, com a API, achamos intuitivo criar transições entre várias jornadas do usuário para tornar a experiência da Web mais parecida com um app. Todos esses benefícios, combinados aos benefícios de desempenho, fazem com que ele seja um recurso obrigatório para todos os sites.—Amit Kumar, gerente de engenharia sênior, redBus.
A equipe implementou transições de visualização em vários lugares. Veja um exemplo de uma combinação de animação de exibição gradual e deslizamento no ícone de login na página inicial.
Programar
Essa implementação usa várias animações view-transition-name e personalizadas
(scale-down e scale-up). O uso de view-transition-name com um valor exclusivo
separa o componente de login do restante da página para animá-lo
separadamente. A criação de um novo view-transition-name exclusivo também cria uma nova
::view-transition-group na árvore de pseudoelementos (mostrada no código
abaixo), permitindo que ela seja manipulada separadamente do
::view-transition-group(root) padrão.
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
A equipe usou transições de visualização para adicionar uma animação de esmaecimento quando o usuário alterna entre as miniaturas do produto.
A implementação é muito fácil. Ao usar
startViewTransition, imediatamente temos uma transição de esmaecimento mais agradável em comparação com a implementação anterior, sem nenhum efeito: Andy Wihalim, engenheiro de software sênior, Tokopedia.
Antes
Depois
Programar
O código a seguir usa um framework React e inclui um código específico dele,
como flushSync.Leia mais sobre como trabalhar com frameworks para implementar transições
de visualização.
Essa é uma implementação básica que verifica se o navegador oferece suporte a
startViewTransition e, em caso afirmativo, faz a transição. Caso contrário, ele retorna ao comportamento padrão.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
Bazar de Políticas
O investimento da Policybazaar usou a API View Transitions em elementos de dica de ajuda, como "por que comprar", o que os torna visualmente atraentes e melhoram o uso desses recursos.
Ao incorporar transições de visualização, eliminamos o código CSS e JavaScript repetitivo responsável pelo gerenciamento de animações em vários estados. Isso economizou esforços de desenvolvimento e melhorou significativamente a experiência do usuário — Aman Soni, líder de tecnologia da Policybazaar.
Programar
O código a seguir é semelhante aos exemplos anteriores. É importante observar a
capacidade de substituir os estilos e as animações padrão de
::view-transition-old(root) e ::view-transition-new(root). Nesse caso,
o animation-duration padrão foi atualizado para 0,4s.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
O que considerar ao usar a API View Transitions
Ao usar vários efeitos de transição de visualização na mesma página, verifique se você tem um nome de transição de visualização diferente para cada efeito ou seção, a fim de evitar conflitos.
Enquanto uma transição de visualização estiver ativa (em transição), ela vai adicionar uma nova camada
sobre o restante da interface. Portanto, evite acionar a transição ao passar o cursor, porque o evento mouseLeave será acionado inesperadamente (quando o cursor real ainda não estiver se movendo).
Recursos
- Transições suaves e simples com a API View Transitions
- Explicação: Ver transições para a MPA
- Estudo de caso: A navegação integrada tornou-se possível com as transições de visualização
- Estudo de caso: A Web pode fazer o quê? | Oferecer navegação semelhante a apps
- Proposta de interoperabilidade: disponibilizar transições de visualização em vários navegadores
- Quer informar um bug ou solicitar um novo recurso? Queremos saber sua opinião sobre SPA e MPA.
Explore os outros artigos desta série que falam sobre como as empresas de e-commerce se beneficiaram do uso dos novos recursos de CSS e interface, como animações de rolagem, pop-up, consultas de contêiner e o seletor has().