Bekijk transitiecasestudies

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Weergaveovergangen zijn geanimeerde en naadloze overgangen tussen verschillende statussen van een webpagina of de gebruikersinterface van een applicatie. De View Transitions 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
  • X

Bron

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 Transitions API hebben geïmplementeerd en ervan hebben geprofiteerd.

rode bus

redBus heeft altijd geprobeerd om zoveel mogelijk gelijkheid te creëren tussen hun native- en webervaringen. Vóór de View Transitions API was het implementeren van deze animaties op onze webmiddelen een uitdaging. 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 Transitions API gebruikt voor helptip-elementen als 'waarom kopen', waardoor ze visueel aantrekkelijker worden en het gebruik van dergelijke functies wordt 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 Transitions 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

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.