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ış olsa bile 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ı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 kalan sabit bir gezinme çubuğu.
• Filtre uygularken öğelerin konumlarını değiştiren bir ızgara.

Görünüm 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.

Her iki tür arasındaki fark, bunları tetikleme şeklinizdir.

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

Tek bir dokümanda görüntüleme geçişinin çalıştırılmasına aynı doküman görüntüleme geçişi adı verilir. Bu durum genellikle tek sayfalık uygulamalarda (SPA'lar) görülür. Aynı doküman görünümü geçişleri, Chrome 111'den Chrome'da desteklenir.

Tetikleme

document.startViewTransition çağrısı yaparak aynı doküman görünümünde geçişler 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 kartlar 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.

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üntüleme geçişi gerçekleştiğinde buna dokümanlar arası görüntüleme geçişi adı verilir. Bu, MPA'lar için normaldir. Doküman görünümü geçişleri Chrome 126 ve sonraki sürümlerde 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. Başka bir deyişle, belgeler arası görünüm geçişi 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, belgeler arası görünüm geçişlerini 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.

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ü geçişleri oluşturma