Ver estudos de caso de transições

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Compatibilidade com navegadores

  • 111
  • 111
  • x
  • 18

Original

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.

Transições de esmaecimento e deslizamento quando o usuário clica no ícone de login na página inicial do redBus.

Código

Essa implementação usa animações view-transition-namee 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.

Veja a animação de transições na CTA "Por que comprar do Policybazaar" em uma página de informações de investimento.

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

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().