View Transition API, web sitenizdeki farklı görünümler arasında sorunsuz görsel geçişler oluşturmanıza olanak tanır. Böylece, sitenizin çok sayfalı bir uygulama (MPA) veya tek sayfalık bir uygulama (SPA) olarak oluşturulmuş olmasına bakılmaksızın, sitenizde gezinen kullanıcılara görsel olarak daha ilgi çekici bir deneyim sunulur.
Görüntüleme 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.
- Siz bir sayfadan diğerine geçerken sabit bir gezinme çubuğu yer alır.
- Filtre olarak gezindikçe öğelerin yerinin değiştiği bir ızgara.
Görünüm 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üntüleme geçişi türü de aynı yapı taşlarını ve ilkeleri temel alır:
- Tarayıcı, eski ve yeni durumların anlık görüntüsünü alır.
- Oluşturma işlemi atlanırken DOM güncellenir.
- 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ü geçişleri
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) geçerlidir. Aynı doküman görünümü geçişleri, Chrome 111'den Chrome'da desteklenir.
Nasıl tetiklenir?
document.startViewTransition çağırarak aynı doküman 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 kartlar örneği, yeni kartlar eklendikçe veya kaldırılırken kartlara animasyon eklemek 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 ilgili belgeler sayfasına bakın.
Aynı doküman görünümü geçişleri oluşturma
Belgeler arası görünüm 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 olağan bir durumdur. 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ı kaynaktan belgeler arası 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, bu tıklama görünüm geçişini tetikler.
En üstte 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. Gezinmeyle ilgili ayrıntılara girip girmediğinize bağlı olarak, sayfalar gruba aktarılır veya öne çıkar.
Derlemeye başlayın
Belgeler arası görünüm geçişleri hakkında bilmeniz gereken her şeyi öğrenin.