View Transition API ile sorunsuz geçişler

Bramus

Görüntü Geçişi API'si, web sitenizdeki farklı görünümler arasında sorunsuz görsel geçişler oluşturma olanağı sunar. Bu sayede, siteniz çok sayfalı uygulama (MPA) veya tek sayfalık uygulama (SPA) olarak tasarlanmış olsun, kullanıcılar sitenizde gezinirken görsel açıdan daha ilgi çekici bir kullanıcı deneyimi yaşar.

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

  • Ürün listeleme sayfasındaki küçük resim, ürün ayrıntıları sayfasındaki tam boyutlu ürün resmine geçiş yapar.
  • Bir sayfadan diğerine geçerken yerinde kalan sabit bir gezinme çubuğu.
  • Filtre uyguladıkça konumları değişen öğelerin bulunduğu bir ızgara.
View Transition API ile oluşturulan geçişler. Demo sitesini deneyin. Chrome 111 veya daha yeni bir sürüm gereklidir.

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

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üntü geçişi türü de aynı yapı taşlarını ve ilkeleri kullanı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 desteklenir.

Bu iki tür arasındaki tek fark, bunların nasıl tetiklendiğidir.

Aynı doküman görünümünde geçişler

Tek bir dokümanda görüntü geçişi yapıldığında buna aynı doküman görüntü geçişi denir. Bu durum genellikle tek sayfalık uygulamalarda (SPA'lar) geçerlidir. Aynı belgedeki görünüm geçişleri, Chrome 111'den itibaren Chrome'da desteklenir.

Tarayıcı desteği

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

Kaynak

Tetikleme

document.startViewTransition çağrısı yaparak aynı doküman görünümünde geçişleri 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ı animasyonlu hale getirmek için aynı doküman görünüm geçişlerini kullanan bir SPA'dır.

Kartlar demosunun kaydı. Chrome 111 veya daha yeni bir sürüm gereklidir.

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üman görünümünde geçişler oluşturma

Doküman arası görüntü geçişleri

İki farklı doküman arasında görünüm geçişi olduğunda buna dokümanlar arası görünüm geçişi denir. Bu, MPA'lar için normaldir. Doküman görünümü geçişleri Chrome 126 ve sonraki sürümlerde desteklenir.

Tarayıcı desteği

  • Chrome: 126.
  • Edge: 126.
  • Firefox: Desteklenmez.
  • Safari Technology Preview: desteklenir.

Tetikleme

Doküman içi görünüm geçişleri, her iki sayfa da etkinleştirildiyse aynı kaynaktan çapraz doküman gezinme tarafından 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.

Ö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üman içi görüntü geçişleri kullanan bir MPA'dır. Gezinme menüsünde daha derinlere gidip gitmediğinize bağlı olarak sayfalar yığına itilir veya yığından çıkarılır.

Stack Navigator demosunun kaydı. Chrome 126 veya sonraki bir sürüm gereklidir.

Derlemeye başlayın

Doküman arası görüntüleme geçişleri hakkında bilmeniz gereken her şeyi öğrenin.

Dokümanlar arası görüntüleme geçişleri oluşturma