Transições de visualização são transições animadas e contínuas entre diferentes estados de uma página da Web ou da interface do aplicativo. A API View Transition foi projetada para permitir que você crie esses efeitos de maneira mais direta e eficiente do que era possível. A API oferece vários benefícios em comparação com as abordagens anteriores de JavaScript, incluindo:
- Melhor experiência do usuário:transições suaves e indicações visuais orientam o usuário nas mudanças na interface, fazendo com que a navegação pareça natural e menos desagradável.
- Continuidade visual:manter uma sensação de continuidade entre as 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 que discute como as empresas de e-commerce melhoraram os sites usando novos recursos de CSS e interface. Neste artigo, descubra como algumas empresas implementaram e se beneficiaram da API View Transition.
redBus
A redBus sempre tentou criar o máximo possível de paridade entre as experiências nativas e da Web. Antes da API View Transition, a implementação dessas animações nos nossos recursos da Web era desafiadora. No entanto, com a API, descobrimos que é intuitivo criar transições entre várias jornadas do usuário para tornar a experiência da Web mais semelhante a um app. Tudo isso, aliado aos benefícios de desempenho, o torna um recurso essencial para todos os sites: Amit Kumar, gerente de engenharia sênior, redBus.
A equipe implementou transições de visualização em vários lugares. Confira um exemplo de uma combinação de animação de aparecimento gradual e exibição no ícone de login na página inicial.
Código
Essa implementação usa 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 gera um novo
::view-transition-group
na árvore de pseudoelementos (mostrada no código
abaixo), permitindo que ele seja manipulado 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 de produtos.
A implementação é tão fácil que, ao usar
startViewTransition
, temos uma transição de esmaecimento imediatamente mais agradável em comparação com a implementação anterior sem nenhum efeito: Andy Wihalim, engenheiro de software sênior, Tokopedia (links em inglês).
Antes
Depois
Código
O código a seguir usa um framework React e inclui um código específico do framework,
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 é compatível com
startViewTransition
e, em caso afirmativo, faz a transição. Caso contrário, ele voltará 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})} />
Politicas
O setor de investimento da Policybazaar usou a API View Transition em elementos de dica de ajuda, como "por que comprar", o que os torna visualmente atraentes e melhora o uso desses recursos.
Ao incorporar transições de visualizações, eliminamos códigos CSS e JavaScript repetitivos responsáveis pelo gerenciamento de animações em vários estados. Isso reduziu o esforço de desenvolvimento e melhorou significativamente a experiência do usuário: Aman Soni, líder de tecnologia da Policybazaar.
Código
O código abaixo é 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 Transition
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 para evitar conflitos.
Enquanto uma transição de visualização está ativa (em transição), ela adiciona 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 ainda não estiver se movendo).
Recursos
- Transições simples e suaves com a API View Transition
- Explicação: Ver transições para MPA
- Estudo de caso: Navegação simplificada possível com as transições de visualizações
- Estudo de caso: a Web pode fazer o quê? | Ofereça navegações parecidas com apps
- Proposta de interoperabilidade: disponibilizar transições de visualizações em vários navegadores
- Quer informar um bug ou solicitar um novo recurso? Queremos saber sua opinião sobre a SPA e a MPA.
Confira os outros artigos desta série que explicam como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e interface, como animações de rolagem, pop-over, consultas de contêiner e o seletor has()
.