Geçişleri Görüntüleme API'si: Tarayıcıdaki Sayfa ve Durum Değişikliklerini Düzgünleştirme
Geçişleri Görüntüle API'sinin ne yaptığı, aynı belge ve belgeler arası geçişlerin nasıl çalıştığı, bunların CSS ile nasıl stillendirileceği ve bunların sorumlu bir şekilde nasıl kullanılacağı.
Ana nokta
Geçişleri Görüntüle API'si, tarayıcının bir sayfanın iki durumu arasında animasyon oluşturmasına olanak tanır. DOM'u güncelleyen bir işlevle document.startViewTransition() işlevini çağırın ve tarayıcı eski ve yeni görünümlerin anlık görüntüsünü alır ve bunlar arasında ::view-transition sözde öğeleriyle stil oluşturabileceğiniz animasyonlar oluşturur. Tek sayfalı uygulamalarda ve desteklenen tarayıcılarda sayfa gezinmelerinde çalışır.
Nasıl çalışır?
MDN, document.startViewTransition() işlevini, tek sayfalı uygulamalarda tipik olarak aynı belge görünümü geçişini başlatmak olarak tanımlar. Tarayıcı geçerli görünümü yakalar, güncellemenizi çalıştırır, yeni görünümü yakalar ve bunlar arasında animasyon uygular. Varsayılan olarak bu bir çapraz geçiştir; CSS bunu değiştirmenize olanak sağlar.
Aynı belge ve çapraz belge
Aynı belge geçişleri, SPA'larda olduğu gibi tek sayfada çalışır ve Chrome, Chrome 111'den beri bunları desteklemektedir. MDN notlarının tarihsel olarak imkansız olduğu, çok sayfalı sitelerdeki ayrı sayfalar arasında çapraz belgeler geçişleri canlandırılır; Pageswap ve pagereveal olaylarını ve CSS'e katılım seçeneğini kullanırlar. Tarayıcı desteği ikisi arasında farklılık gösterdiğinden mevcut uyumluluk tablolarını kontrol edin.
Geçişi şekillendirme
Çoğu özelleştirme düzdür CSS:
- Bir öğeye, onu sayfanın geri kalanından ayrı olarak canlandırmak için bir görünüm geçiş adı verin (örneğin, küçük resmin büyük bir görüntüye dönüşmesi gibi).
- Animasyonu özelleştirmek için ::view-transition-old() ve ::view-transition-new() öğelerini hedefleyin.
- Süreleri kısa ve hareketi anlamlı tutun.
- Özel animasyonları tercihler azaltılmış hareket kontrollerine sarın.
Aşamalı geliştirme
API'yi çağırmadan önce her zaman desteği kontrol edin ve eksikse DOM'u doğrudan güncelleyin. Sayfa animasyon olmadan da aynı şekilde çalışmalıdır. Gezinme sırasında tüm sitenin yavaşlamasına neden olan uzun geçişlerden kaçının.
Üretim için uygulama örneği
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Hatırlanacak temel ilkeler
- startViewTransition() eski ve yeni görünümlerin anlık görüntüsünü alır ve aralarında animasyon oluşturur
- Aynı belge (SPA) ve çapraz belge (çok sayfalı) çeşitleri mevcuttur
- view-transition-name ve ::view-transition sözde öğeleriyle stil
- Desteği kontrol edin ve anında güncellemeye geri dönün
- Geçişleri kısa tutun ve azaltılmış harekete uyun
Sık sorulan sorular
Kaynaklar
- View Transition API — MDN Web Belgeleri
- Smooth transitions with the View Transition API — Geliştiriciler için Chrome