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 estados diferentes na interface de uma página da Web ou aplicativo. A Visualizar a API Transition foi projetado para permitem que você crie esses efeitos de uma forma mais direta e eficiente o que é possível antes. A API oferece vários benefícios em relação Abordagens de JavaScript, incluindo:

  • Melhor experiência do usuário:transições suaves e indicações visuais guiam os usuários por meio de alterações na IU, tornando a navegação natural e menos desagradável.
  • Continuidade visual:manter um senso de continuidade entre as visualizações. reduz a carga cognitiva e ajuda os usuários a permanecer orientados no aplicativo.
  • Desempenho:a API tenta usar o mínimo possível de recursos da linha de execução principal possível, o que cria animações mais suaves.
  • Estética moderna:as transições aprimoradas contribuem para um resultado com uma experiência do usuário envolvente.

Compatibilidade com navegadores

  • Chrome: 111
  • Borda: 111.
  • Firefox: incompatível.
  • Safari: 18.

Origem

Esta postagem faz parte de uma série discutindo como empresas de e-commerce aprimorou o site 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 de paridade entre seus modelos nativos experiências possíveis. Antes da API View Transition, implementar essas animações em nossos recursos da Web era desafiador. Mas com a API, descobrimos que intuitivos para criar transições entre várias jornadas do usuário para tornar a Web ter uma experiência mais parecida com os apps. Aliado aos benefícios de desempenho, deve ter recursos para todos os sites.—Amit Kumar, engenharia sênior Gerente da redBus.

A equipe implementou transições de visualização em vários lugares. Aqui está um exemplo de uma combinação de animação de aparecimento gradual e exibição no ícone de login da página inicial página.

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

Código

Esta implementação usa váriasview-transition-nameanimações personalizadas (scale-down e scale-up). Como usar view-transition-name com um valor exclusivo separa o componente de login do resto da página para animá-lo separadamente. Criar um novo view-transition-name exclusivo também gera um novo ::view-transition-group na árvore de pseudoelementos (mostrada no padrão), permitindo que sejam manipulados separadamente dos padrões ::view-transition-group(root)

::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 troca entre as miniaturas.

A implementação é tão fácil que usamos startViewTransition para ter uma transição de esmaecimento mais agradável em comparação com a implementação anterior sem efeitos—Andy Wihalim, software sênior engenheiro, Tokopedia.

Antes

Depois

Código

O código a seguir usa um framework React e inclui código específico do framework. como flushSync.Leia mais sobre como trabalhar com frameworks para implementar visualizações transições. Esta é uma implementação básica que verifica se o navegador é compatível startViewTransition e, em caso afirmativo, faz a transição. Caso contrário, ele toma para o 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

Policybazaar investimento usa 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 CSS e JavaScript repetitivos responsável por gerenciar animações em vários estados. Isso economizou esforço de desenvolvimento e melhorou significativamente a experiência do usuário.—Aman Soni, líder de tecnologia, Policybazaar.

.
Animação de transições da página "Por que comprar do Policybazaar" CTA na página de informações do investimento.

Código

O código abaixo é semelhante aos exemplos anteriores. Uma coisa a observar é que a capacidade de substituir os estilos e as animações padrão ::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ê ter um nome de transição de visualização diferente para cada efeito ou seção para evitar conflitos de segurança.

Enquanto uma transição de visualização está ativa (em transição), ela adiciona uma nova camada no topo do restante da interface. Portanto, evite acionar a transição ao passar o cursor, porque o evento mouseLeave será acionado inesperadamente (quando o cursor real for ainda não está se movendo).

Recursos

Confira os outros artigos desta série que abordam como o comércio eletrônico empresas que se beneficiaram do uso de novos recursos de CSS e interface do usuário, como os recursos de rolagem animações, pop-over, consultas de contêiner e o seletor has().