View Transition API ile sorunsuz geçişler

Bramus

View Transition API, web sitenizdeki farklı görünümler arasında sorunsuz görsel geçişler oluşturmanıza olanak tanır. Bu sayede, siteniz çok sayfalı uygulama (MPA) veya tek sayfalı uygulama (SPA) olarak oluşturulmuş olsa da kullanıcılar sitenizde gezinirken daha ilgi çekici bir görsel deneyim yaşar.

Görünüm geçişlerini kullanacağınız tipik durumlar şunlardır:

• Ürün listeleme sayfasında, ürün ayrıntıları sayfasında tam boyutlu ürün resmine dönüşen küçük resim.
• Bir sayfadan diğerine giderken yerinde kalan sabit bir gezinme çubuğu.
• Filtreleme yaptıkça konum değiştiren öğelerin bulunduğu bir ızgara.

Görüntüleme geçişlerini uygulama

Görünüm geçişleri belirli bir uygulama mimarisine veya çerçeveye bağlı değildir ve yalnızca tek bir dokümanda değil, iki farklı doküman arasında da tetiklenebilir.

Her iki görünüm geçişi türü de aynı yapı taşlarına ve ilkelere dayanır:

1. Tarayıcı, eski ve yeni durumların anlık görüntülerini alır.
2. Oluşturma işlemi bastırılırken DOM güncellenir.
3. Geçişler, CSS animasyonları tarafından desteklenir.

İki tür arasındaki tek fark, bunları nasıl tetiklediğinizdir.

Aynı dokümanda görünüm geçişleri

Bir görünüm geçişi tek bir dokümanda çalıştırıldığında aynı doküman görünüm geçişi olarak adlandırılır. Bu durum genellikle tek sayfalık uygulamalarda (SPA'lar) görülür. Aynı belge görünümü geçişleri, Chrome 111'den itibaren Chrome'da desteklenir.

Nasıl tetiklenir?

document.startViewTransition işlevini çağırarak aynı dokümanda görüntüleme geçişlerini tetikleyin:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

Örnek

Aşağıdaki kart örneği, yeni kartlar eklendikçe veya kaldırıldıkça kartları canlandırmak için aynı doküman görünümü geçişlerini kullanan bir SPA'dır.

Derlemeye başlayın

Aynı doküman görünümü geçişleri hakkında bilmeniz gereken her şeyi öğrenmek için özel doküman sayfasına bakın.

Aynı dokümanda görüntüleme geçişleri oluşturma

Dokümanlar arası görünüm geçişleri

İki farklı belge arasında görünüm geçişi gerçekleştiğinde buna belgeler arası görünüm geçişi denir. Bu, MPA'lar için normaldir. Dokümanlar arası görünüm geçişleri, Chrome 126 ve sonraki sürümlerde desteklenir.

Nasıl tetiklenir?

Belgeler arası görünüm geçişleri, her iki sayfa da etkinleştirilmişse aynı kaynaklı belgeler arası gezinme ile tetiklenir. Diğer bir deyişle, dokümanlar arası görünüm geçişini başlatmak için çağrılacak bir API yoktur. Kullanıcı bir bağlantıyı tıkladığında tıklama, görünüm geçişini tetikler.

Bu özelliği etkinleştirmek için aşağıdaki CSS snippet'ini kullanın:

@view-transition {
  navigation: auto;
}

Örnek

Aşağıdaki Stack Navigator örneği, iki farklı doküman arasında dokümanlar arası görünüm geçişleri kullanan bir MPA'dır. Gezinme işlemine daha fazla dahil olup olmamanıza bağlı olarak sayfalar yığına gönderilir veya yığından çıkarılır.

Derlemeye başlayın

Dokümanlar arası görünüm geçişleri hakkında bilmeniz gereken her şeyi öğrenin.

Dokümanlar arası görünüm geçişleri oluşturma