Bekijk transitiecasestudies

Swetha Gopalakrishnan

Saurabh Rajpal

Weergaveovergangen zijn geanimeerde en naadloze overgangen tussen verschillende statussen van een webpagina of de gebruikersinterface van een applicatie. De View Transition API is ontworpen om u deze effecten op een eenvoudigere en performantere manier te laten creëren dan voorheen mogelijk was. De API biedt meerdere voordelen ten opzichte van eerdere JavaScript-benaderingen, waaronder:

• Verbeterde gebruikerservaring: vloeiende overgangen en visuele aanwijzingen leiden gebruikers door veranderingen in de gebruikersinterface, waardoor navigatie natuurlijk en minder schokkend aanvoelt.
• Visuele continuïteit: het behouden van een gevoel van continuïteit tussen weergaven vermindert de cognitieve belasting en helpt gebruikers georiënteerd te blijven binnen de applicatie.
• Prestaties: De API probeert zo min mogelijk hoofdthreadbronnen te gebruiken, wat vloeiendere animaties oplevert.
• Moderne esthetiek: de verbeterde overgangen dragen bij aan een gepolijste en boeiende gebruikerservaring.

Browserondersteuning

• 111
• 111
• X
• 18

Bron

Opmerking: Chrome heeft op het moment van schrijven View Transition API-ondersteuning voor Single Page Apps (SPA) uitgerold, terwijl ondersteuning voor Multiple Page Apps (MPA) beschikbaar is achter de chrome://flags/#view-transition-on-navigation vlag. Lees meer over de View Transition API .

Dit bericht maakt deel uit van een serie waarin wordt besproken hoe e-commercebedrijven hun website hebben verbeterd met behulp van nieuwe CSS- en UI-functies. Ontdek in dit artikel hoe sommige bedrijven de View Transition API hebben geïmplementeerd en ervan hebben geprofiteerd.

rodeBus

redBus heeft altijd geprobeerd om zoveel mogelijk gelijkheid te creëren tussen hun native- en webervaringen. Vóór de View Transition API was het een uitdaging om deze animaties op onze webitems te implementeren. Maar met de API hebben we ontdekt dat het intuïtief is om overgangen tussen meerdere gebruikerstrajecten te creëren om de webervaring meer app-achtig te maken. Dit alles in combinatie met prestatievoordelen maakt het een must-have voor alle websites.— Amit Kumar , Senior Engineering Manager, redBus .

Het team heeft op meerdere plaatsen weergaveovergangen geïmplementeerd. Hier is een voorbeeld van een combinatie van fade-in- en slide-in-animatie op het inlogpictogram op de startpagina.

Fade- en slide-in-weergaveovergangen wanneer de gebruiker op het login-pictogram op de redBus-startpagina klikt.

Code

Deze implementatie maakt gebruik van meerdere view-transition-name en aangepaste animaties ( scale-down en scale-up ). Door view-transition-name met een unieke waarde te gebruiken, wordt de aanmeldingscomponent gescheiden van de rest van de pagina, zodat deze afzonderlijk wordt geanimeerd. Het creëren van een nieuwe unieke view-transition-name creëert ook een nieuwe ::view-transition-group in de pseudo-elementboom (weergegeven in de volgende code), waardoor deze afzonderlijk van de standaard ::view-transition-group(root) kan worden gemanipuleerd ::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

Het team gebruikte weergaveovergangen om een ​​vervagende animatie toe te voegen wanneer de gebruiker tussen productminiaturen schakelt.

De implementatie is zo eenvoudig dat we door startViewTransition te gebruiken onmiddellijk een aangenamere fading-overgang krijgen vergeleken met de vorige implementatie zonder enig effect – Andy Wihalim , Senior Software Engineer, Tokopedia .

Voor

Na

Code

De volgende code maakt gebruik van een React-framework en bevat framework-specifieke code, zoals flushSync. Lees meer over het werken met raamwerken om zichttransities te implementeren . Dit is een basisimplementatie die controleert of de browser startViewTransition ondersteunt en, zo ja, de transitie uitvoert. Anders valt het terug naar het standaardgedrag.

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})} />

Beleidsbazaar

De investeringsbranche van Policybazaar heeft de View Transition API gebruikt voor helptip-elementen als "waarom kopen", waardoor ze visueel aantrekkelijk zijn geworden en het gebruik van dergelijke functies is verbeterd.

Door View Transitions op te nemen, hebben we repetitieve CSS- en JavaScript-code geëlimineerd die verantwoordelijk is voor het beheer van animaties in verschillende staten. Dit bespaarde ontwikkelingsinspanningen en verbeterde de gebruikerservaring aanzienlijk.— Aman Soni , Tech Lead, Policybazaar .

Bekijk de overgangsanimatie op de CTA 'Waarom kopen bij Policybazaar' op een beleggingspagina.

Code

De volgende code is vergelijkbaar met de vorige voorbeelden. Eén ding om op te merken is de mogelijkheid om de standaardstijlen en animaties van ::view-transition-old(root) en ::view-transition-new(root) te overschrijven. In dit geval werd de standaard animation-duration bijgewerkt naar 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;
}

Dingen waarmee u rekening moet houden bij het gebruik van de View Transition API

Wanneer u meerdere weergave-overgangseffecten op dezelfde pagina gebruikt, zorg er dan voor dat u voor elk effect of elke sectie een andere weergave-overgangsnaam heeft om conflicten te voorkomen.

Terwijl een weergaveovergang actief is (overgang), wordt er een nieuwe laag toegevoegd bovenop de rest van de gebruikersinterface. Vermijd dus het activeren van de overgang bij zweven, omdat de mouseLeave -gebeurtenis onverwacht wordt geactiveerd (terwijl de daadwerkelijke cursor nog steeds niet beweegt).

Bronnen

• Vlotte en eenvoudige overgangen met de View Transition API
• Uitleg: bekijk overgangen voor MPA
• Casestudy: Naadloze navigatie mogelijk gemaakt met View Transitions
• Casestudy: het internet kan wat doen!? | Lever app-achtige navigatie
• Interop-voorstel: Maak weergaveovergangen beschikbaar in alle browsers
• Wil je een bug melden of een nieuwe functie aanvragen? Wij willen graag van u horen voor SPA en MPA .

Ontdek de andere artikelen in deze serie waarin wordt besproken hoe e-commercebedrijven profiteerden van het gebruik van nieuwe CSS- en UI-functies, zoals scrollgestuurde animaties, popover, containerquery's en de has() selector.

• Waarom zijn Web UI-mogelijkheden belangrijk voor uw e-commercesite?
• Casestudy's van scrollgestuurde animaties
• Popover API-casestudy's
• Casestudies van containerquery's
• :has() selector-casestudies