Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Swetha Gopalakrishnan

Saurabh Rajpal

Görünüm geçişleri, bir web sayfasının veya uygulamanın kullanıcı arayüzünün farklı durumları arasında animasyonlu ve sorunsuz geçişlerdir. Görüntü Geçişi API'si, bu efektleri daha önce mümkün olandan daha basit ve performanslı bir şekilde oluşturmanıza olanak tanımak için tasarlanmıştır. API, önceki JavaScript yaklaşımlarına kıyasla aşağıdakiler gibi birçok avantaj sunar:

Daha iyi kullanıcı deneyimi: Sorunsuz geçişler ve görsel ipuçları, kullanıcıları kullanıcı arayüzündeki değişikliklerde yönlendirerek gezinmeyi doğal ve daha az rahatsız edici hale getirir.
Görsel süreklilik: Görünümler arasında süreklilik hissi sağlamak, bilişsel yükü azaltır ve kullanıcıların uygulamada yönlerini kaybetmemesine yardımcı olur.
Performans: API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır. Bu sayede daha akıcı animasyonlar oluşturulur.
Modern estetik: İyileştirilmiş geçişler, şık ve ilgi çekici bir kullanıcı deneyimi sağlar.

Tarayıcı desteği

Kaynak

Bu gönderi, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini ele alan bir serinin parçasıdır. Bu makalede, bazı şirketlerin Görüntüleme Geçişi API'yi nasıl uyguladığı ve bu API'den nasıl yararlandığı açıklanmaktadır.

redBus

redBus, her zaman yerel ve web deneyimleri arasında mümkün olduğunca fazla eşitlik sağlamaya çalıştı. Görüntü Geçişi API'sinden önce bu animasyonları web öğelerimize uygulamak zordu. Ancak API sayesinde, web deneyimini daha uygulama benzeri hale getirmek için birden fazla kullanıcı yolculuğu arasında geçişler oluşturmanın sezgisel olduğunu fark ettik. Tüm bunlar, performans avantajlarıyla birlikte bu özelliği tüm web siteleri için zorunlu kılıyor.—Amit Kumar, Kıdemli Mühendislik Yöneticisi, redBus.

Ekip, görünüm geçişlerini birden fazla yerde uyguladı. Ana sayfadaki giriş simgesinde kaydırma ve kaybolma animasyonlarının birlikte kullanıldığı bir örneği aşağıda bulabilirsiniz.

Kullanıcı redBus ana sayfasındaki giriş simgesini tıkladığında görünüm geçişlerinde solma ve kaydırma efekti.

Kod

Bu uygulamada birden fazlaview-transition-name ve özel animasyon (scale-down ve scale-up) kullanılmaktadır. view-transition-name öğesi benzersiz bir değerle kullanıldığında, oturum açma bileşeni ayrı olarak animasyonlu hale getirmek için sayfanın geri kalanından ayrılır. Yeni bir benzersiz view-transition-name oluşturduğunuzda, sözde öğe ağacında (aşağıdaki kodda gösterilmiştir) yeni bir ::view-transition-group de oluşturulur. Bu sayede, varsayılan ::view-transition-group(root)'den ayrı olarak değiştirilebilir.

::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ı ürün küçük resimleri arasında geçiş yaptığında kaybolan bir animasyon eklemek için görünüm geçişlerini kullandı.

Uygulama çok kolay. startViewTransition'ü kullanarak, herhangi bir efekt olmadan önceki uygulamaya kıyasla daha hoş bir solma geçişi elde ettik. Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia.

Önce

Sonra

Kod

Aşağıdaki kodda bir React çerçevesi kullanılmakta ve çerçeveye özgü kodlar (ör. flushSync.Görüntü geçişlerini uygulamak için çerçevelerle çalışma hakkında daha fazla bilgi edinin.) yer almaktadır. Bu, tarayıcının startViewTransition'ü destekleyip desteklemediğini kontrol eden ve desteklediği takdirde geçiş yapan temel bir uygulamadır. Aksi takdirde varsayılan davranışa geri döner.

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

Policybazaar'ın yatırım dikeyinde, "neden satın almalısınız?" gibi yardım ipucu öğelerinde Görüntü Geçişi API'si kullanılarak bu öğeler görsel açıdan ilgi çekici hale getirilmiş ve bu tür özelliklerin kullanımı iyileştirildi.

Görünüm Geçişleri'ni dahil ederek, çeşitli durumlarda animasyonları yönetmekten sorumlu olan tekrar eden CSS ve JavaScript kodlarını ortadan kaldırdık. Bu sayede geliştirme çalışmalarından tasarruf ettik ve kullanıcı deneyimini önemli ölçüde iyileştidik.—Aman Soni, Teknik Lider, Policybazaar.

Bir yatırım girişi sayfasındaki "Policybazaar'dan neden satın almalısınız?" CTA'sında geçiş animasyonunu görüntüleyin.

Kod

Aşağıdaki kod, önceki örneklere benzer. ::view-transition-old(root) ve ::view-transition-new(root) öğelerinin varsayılan stillerini ve animasyonlarını geçersiz kılabileceğinizi unutmayın. Bu durumda, varsayılan animation-duration 0,4 saniye 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 fazla görüntü geçişi efekti kullanırken çakışmaları önlemek için her efekt veya bölüm için farklı bir view-transition-name değerine sahip olduğunuzdan emin olun.

Görüntü geçişi etkinken (geçiş sırasında) kullanıcı arayüzünün geri kalanının üzerine yeni bir katman eklenir. Bu nedenle, mouseLeave etkinliği beklenmedik bir şekilde tetikleneceğinden (gerçek imleç henüz hareket etmediği halde) geçişi fareyle üzerine gelme sırasında tetiklemekten kaçının.

Kaynaklar

Görüntüleme Geçişi API'si ile sorunsuz ve basit geçişler
Açıklama: MPA için Geçişleri Görüntüleme
Örnek olay: Görüntüleme geçişleri sayesinde sorunsuz gezinme
Başarılı Örnek: Web'in Yapabileceği Şeyler | Uygulama benzeri gezinmeler yayınlama
İnteroperabilite Önerisi: Görüntüleme Geçişleri'ni tarayıcılarda kullanılabilir hale getirme
Hata bildirmek veya yeni bir özellik isteğinde bulunmak ister misiniz? SPA ve MPA ile ilgili görüşlerinizi öğrenmek isteriz.

Bu serinin, e-ticaret şirketlerinin kaydırmayla çalışan animasyonlar, pop-up, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığından bahseden diğer makalelerini inceleyin.