Geçişlerle ilgili örnek olayları görüntüleyin

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Görünüm geçişleri animasyonludur ve farklı durumlar arasındaki sorunsuz geçişleri içerir kullanıcı arayüzünün ekran görüntüsüdür. İlgili içeriği oluşturmak için kullanılan Transition API'yi görüntüleyin , Böylece, bu efektleri, Google Play'de olduğundan daha basit ve ne kadar mümkündü. API, öncekilere kıyasla birden çok avantaj sunar Aşağıdakileri içeren JavaScript yaklaşımları:

  • İyileştirilmiş kullanıcı deneyimi: Düzgün geçişler ve görsel işaretler kullanıcılara yol gösterir Böylece kullanıcı arayüzündeki değişiklikler sayesinde gezinmenin daha doğal ve daha rahatsız edici olmasını sağlayabilirsiniz.
  • Görsel süreklilik: Görünümler arasında bir süreklilik hissini koruma bilişsel yükü azaltır ve kullanıcıların uygulamaya odaklanmalarına yardımcı olur.
  • Performans: API, mümkün olduğunca az sayıda ana iş parçacığı kaynağı kullanmaya Bu da daha akıcı animasyonlar oluşturur.
  • Modern estetik: İyileştirilmiş geçişler daha şık ve ilgi çekici kullanıcı deneyimi

Tarayıcı Desteği

  • Chrome: 111..
  • Kenar: 111..
  • Firefox: Desteklenmez..
  • Safari: 18..

Kaynak

Bu yayın bir serinin parçası e-ticaret şirketlerinin web sitelerini yeni CSS ve kullanıcı arayüzü özellikleri kullanarak geliştirdi. Bu makalede, bazı şirketlerin View Transition API'yi nasıl uyguladığı ve ondan nasıl yararlandığı.

redBus

redBus her zaman, yerel çözümleri ile web arasında mümkün olduğunca sunmak için çalışıyoruz. View Transition API'den önce bu animasyonları uygulamak zordu. Ancak API sayesinde, birden fazla kullanıcı yolculuğunda geçişler yaratmak için web'i bir deneyimim var. Tüm bunlar performans avantajlarıyla bir araya geldiğinde tüm web sitelerinde bulunması gerekir.—Amit Kumar, Kıdemli Mühendislik Yönetici, redBus.

Ekip, görüntüleme geçişlerini birden fazla yerde uyguladı. Bir örnekle açıklayalım ana sayfadaki giriş simgesinde kararma ve kayma animasyonunun bir kombinasyonu sayfasını ziyaret edin.

Kullanıcı giriş bilgilerini tıkladığında karartarak ve kayarak görünüm geçişleri simgesini tıklayın.

Kod

Bu uygulamada birden çokview-transition-nameve özel animasyon kullanılır (scale-downve scale-up). view-transition-name özelliğini benzersiz bir değerle kullanma canlandırmak için oturum açma bileşenini sayfanın geri kalanından ayırır ayrı olarak düzenleyebilirsiniz. Yeni bir benzersiz view-transition-name oluşturmak yeni bir de ::view-transition-group söz konusu öğe ağacında (aşağıdaki şekilde gösterilmiştir) varsayılandan ayrı olarak değiştirilmesine olanak tanır. ::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

Ekip, kullanıcı geçiş yaptığında kararma animasyonu eklemek için görünüm geçişleri kullandı ürün küçük resimlerinin arasına yerleştirilmiştir.

Uygulama çok kolay. startViewTransition kullanarak hemen önceki uygulamaya kıyasla daha hoş bir solma geçişi elde ediliyor herhangi bir efekt içermeyen—Andy Wihalim, Kıdemli Yazılım Mühendis, Tokopedia.

Önce

Sonra

Kod

Aşağıdaki kod React çerçevesi kullanır ve çerçeveye özgü kod içerir. flushSync.Görünümü uygulamak için çerçevelerle çalışmahakkında daha fazla bilgi edinin görüntülenebilir. Bu, tarayıcının tarayıcı özelliklerini destekleyip desteklemediğini kontrol eden startViewTransition, varsa geçişi gerçekleştirir. Aksi takdirde varsayılan davranışa geri dönelim.

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

Politika Pazarı

Policybazaar'ın yatırım dikey, "Neden satın almalıyım?", "Neden satın almalıyım?", ve bu tür özelliklerin kullanımını iyileştirerek onları görsel olarak ilgi çekici hale getirir.

Görünüm Geçişleri'ni kullanarak yinelenen CSS ve JavaScript'leri ortadan kaldırdık. animasyonları yönetmekten sorumlu kod içerir. Bu kaydedildi ve kullanıcı deneyimini önemli ölçüde iyileştirdi.—Aman Soni, Teknoloji Lideri, Policybazaar.

ziyaret edin.
"Neden Policybazaar'dan satın almalıyım?" sorusundaki geçiş animasyonunu görüntüle CTA bir yatırım listesidir.

Kod

Aşağıdaki kod önceki örneklere benzer. Önemli bir nokta, varsayılan stillerini ve animasyonlarını geçersiz kılma özelliği ::view-transition-old(root)ve::view-transition-new(root). Böyle durumlarda varsayılan animation-duration 0,4 sn.olarak güncellendi.

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

View Transition API'yi kullanırken dikkat edilmesi gereken noktalar

Aynı sayfada birden çok görüntüleme geçişi efekti kullanıyorsanız: her efekt veya bölüm için farklı bir görünüm geçiş adına sahip olmak çatışmaya neden olabilir.

Bir görünüm geçişi etkin durumdayken (geçiş yapıyor) olduğunda, yeni bir katman görünür. Bu yüzden, fareyle üzerine gelindiğinde geçişi tetiklemekten kaçının, çünkü mouseLeave etkinliği beklenmedik bir şekilde tetiklenecek (gerçek imleç hâlâ hareket etmiyor).

Kaynaklar

Bu seride, e-ticaretin nasıl gerçekleştiğinden bahseden diğer makaleleri inceleyin. kaydırma odaklı gibi yeni CSS ve kullanıcı arayüzü özelliklerinden faydalanan şirketlere animasyonlar, pop-up, kapsayıcı sorguları ve has() seçicisi.