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 efficiëntere manier te laten creëren dan ooit tevoren. De API biedt meerdere voordelen ten opzichte van eerdere JavaScript-benaderingen, waaronder:

• Verbeterde gebruikerservaring: vloeiende overgangen en visuele aanwijzingen begeleiden gebruikers door wijzigingen in de gebruikersinterface, waardoor navigatie natuurlijk en minder schokkerig aanvoelt.
• Visuele continuïteit: Door een gevoel van continuïteit tussen weergaven te behouden, wordt de cognitieve belasting verminderd en kunnen gebruikers hun weg vinden in de applicatie.
• Prestaties: De API probeert zo min mogelijk bronnen van de hoofdthread te gebruiken, waardoor animaties vloeiender worden.
• Moderne esthetiek: de verbeterde overgangen dragen bij aan een verzorgde en boeiende gebruikerservaring.

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

rodeBus

RedBus heeft er altijd naar gestreefd om zoveel mogelijk gelijkheid te creëren tussen hun native en webervaringen. Vóór de View Transition API was het implementeren van deze animaties op onze webassets een uitdaging. Maar met de API vonden we het intuïtief om overgangen te creëren voor meerdere gebruikersreizen, waardoor de webervaring meer op een app lijkt. Dit alles, gecombineerd met prestatievoordelen, maakt het een onmisbare functie 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 homepage.

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 het aanmeldonderdeel gescheiden van de rest van de pagina, zodat het apart geanimeerd kan worden. Door een nieuwe unieke view-transition-name aan te maken, wordt ook een nieuwe ::view-transition-group aangemaakt in de pseudo-elementboom (weergegeven in de volgende code), waardoor deze apart van de standaard ::view-transition-group(root) kan worden bewerkt.

::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. Door startViewTransition te gebruiken krijgen we onmiddellijk een aangenamere overgang in vergelijking met de vorige implementatie zonder enige effecten . — Andy Wihalim , Senior Software Engineer, Tokopedia .

Voor

Na

Code

De volgende code maakt gebruik van een React-framework en bevat frameworkspecifieke code, zoals flushSync. Lees meer over het werken met frameworks om weergaveovergangen te implementeren . Dit is een basisimplementatie die controleert of de browser startViewTransition ondersteunt en zo ja, de overgang uitvoert. Anders wordt teruggevallen op 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})} />

Policybazaar

De beleggingssector van Policybazaar gebruikt de View Transition API voor helptips zoals 'waarom kopen'. Hierdoor zijn ze visueel aantrekkelijker geworden en worden de functies beter benut.

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

Code

De volgende code is vergelijkbaar met de vorige voorbeelden. Een 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 is de standaard animation-duration bijgewerkt naar 0,4 seconden.

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;
}

Waar u rekening mee 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 gebruikt om conflicten te voorkomen.

Zolang een weergaveovergang actief is (transitie), wordt er een nieuwe laag toegevoegd bovenop de rest van de gebruikersinterface. Vermijd daarom het activeren van de overgang bij het bewegen van de muis, omdat de mouseLeave -gebeurtenis dan onverwacht wordt geactiveerd (wanneer de cursor nog niet beweegt).

Bronnen

• Soepele en eenvoudige overgangen met de View Transition API
• Uitleg: Bekijk overgangen voor MPA
• Case Study: Naadloze navigatie mogelijk gemaakt met View Transitions
• Case Study: Wat kan het web doen!? | App-achtige navigatie leveren
• Interop-voorstel: maak weergave-overgangen beschikbaar in alle browsers
• Wilt u een bug melden of een nieuwe functie aanvragen? We horen graag van u voor SPA en MPA .

Ontdek de andere artikelen in deze serie die gaan over hoe e-commercebedrijven profiteren van nieuwe CSS- en UI-functies zoals scroll-aangedreven animaties, popovers, containerquery's en de has() selector.

• Waarom zijn web-UI-mogelijkheden belangrijk voor uw e-commercesite?
• Casestudies van scroll-gestuurde animaties
• Popover API-casestudies
• Casestudies over containerquery's
• :has() selector casestudies