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, sitenizin çok sayfalı uygulama (MPA) veya tek sayfalık uygulama (SPA) şeklinde oluşturulmuş olmasından bağımsız olarak, kullanıcılar sitenizde gezinirken görsel açıdan daha ilgi çekici bir kullanıcı deneyimi oluşturur.

Görüntüleme geçişlerini kullanacağınız genel durumlar şunlardır:

  • Bir ü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 geçerken yerinde duran sabit bir gezinme çubuğu.
  • Siz filtre uygularken öğelerin hareket ettiği bir ızgara.
View Transition API ile oluşturulan geçişler. Demo sitesini deneyin. Chrome 111 veya sonraki bir sürümü gerektirir.

Görünüm geçişlerini uygulayın

Görüntüleme geçişleri belirli bir uygulama mimarisine veya çerçevesine 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ı ve ilkelerine dayanır:

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

Her iki tür arasında farklı olan şey, bunları nasıl tetiklediğinizdir.

Aynı dokümanı görüntüleme geçişleri

Görüntüleme geçişi tek bir dokümanda çalıştırıldığında, buna aynı doküman görüntüleme geçişi adı verilir. Bu durum genellikle tek sayfalık uygulamalarda (SPA'lar) geçerlidir. Aynı dokümanı görüntüleme geçişleri Chrome 111'den Chrome'da desteklenmektedir.

Tarayıcı Desteği

  • 111
  • 111
  • x
  • x

Kaynak

Nasıl tetiklenir?

document.startViewTransition yöntemini çağırarak aynı doküman görünümü 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 kartlar ö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.

Kartlar demosunun kaydı. Chrome 111 veya sonraki bir sürümü gerektirir.

Derlemeye başlayın

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

Aynı doküman görüntüleme geçişlerini oluşturma

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

İki farklı doküman arasında bir görüntüleme geçişi gerçekleştiğinde, buna dokümanlar arası görünüm geçişi adı verilir. Bu, MPA'lar için tipik bir durumdur. Dokümanlar arası görünüm geçişleri Chrome 126 ve sonraki sürümlerde desteklenir.

Tarayıcı Desteği

  • 126
  • 126
  • x
  • x

Kaynak

Nasıl tetiklenir?

Dokümanlar arası görünüm geçişleri, her iki sayfa da etkinleştirilmişse aynı kaynak, dokümanlar arası gezinme tarafından tetiklenir. Başka 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, bu tıklama görünüm geçişini tetikler.

En iyi seçenek, 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 konusunda daha derine inip inmediğinize bağlı olarak, sayfalar yığına aktarılır veya çıkar.

Stack Navigator demosu kaydı. Chrome 126 veya sonraki bir sürümü gerektirir.

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