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.
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:
- Tarayıcı, eski ve yeni durumların anlık görüntülerini alır.
- Oluşturma işlemi engellenirken DOM güncellenir.
- 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.
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.
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.
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.
Derlemeye başlayın
Dokümanlar arası görünüm geçişleri hakkında bilmeniz gereken her şeyi öğrenin.