View Transition API, web geliştirmede benzersiz bir deneyim sunar. Web siteniz ister tek ister çok sayfalı olsun, bu güçlü API, görünümler arasında sorunsuz geçişler oluşturmanıza olanak tanıyarak kullanıcıları cezbeden, yerel deneyimlerin oluşmasını sağlar. Şu anda Chrome'da kullanılabilir. Aynı doküman görüntüleme geçişleri yakında Safari'de de kullanıma sunulacaktır.
View Transition API'yi inceleyen kullanıcıların sayısı arttıkça bazı yanlış kanıları çürütmenin zamanı geldi.
Yanlış kanı 1: View Transition API ekran görüntüsü alır
Bir görüntüleme geçişi çalıştırırken API, içeriğin eski ve yeni durumunun anlık görüntüsünü alır. Daha sonra bu anlık görüntüler, dokümanın "Bu geçişlerin işleyiş şekli" bölümünde ayrıntılı olarak açıklandığı şekilde animasyonlu hale getirilir.
Eski anlık görüntü için ekran görüntüsü terimini kullanabilirsiniz, ancak yeni anlık görüntü bir ekran görüntüsü değildir, aslında düğümün canlı bir temsilidir. Bunu, değiştirilmiş bir element olarak düşünün.
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root) 👈 Screenshot
└─ ::view-transition-new(root) 👈 Live representation
Bu canlı yayın özelliği sayesinde bunun gibi demolar işe yarıyor: Yeni anlık görüntüden elde edilen video, görüntüleme geçişi sırasında oynatılmaya devam ediyor.
Bunun için kullanılan mantık ve CSS, belgelerimizde ayrıntılı olarak açıklanmıştır.
Yanlış kanı 2: Birden fazla öğe yakalanırsa birden fazla görünüm geçişi çalışır
Birden fazla öğe yakaladığınızda, anlık görüntü işlemi tüm eski ve yeni durumları yakalar. :root öğesine ek olarak bir .box yakaladığınızda şu sözde ağacı elde edersiniz:
::view-transition
└─ ::view-transition-group(root)
| └─ ::view-transition-image-pair(root)
| ├─ ::view-transition-old(root)
| └─ ::view-transition-new(root)
└─ ::view-transition-group(box)
└─ ::view-transition-image-pair(box)
├─ ::view-transition-old(box)
└─ ::view-transition-new(box)
Bu ağaç birden fazla anlık görüntü çifti içerse de yalnızca tek bir görünüm geçişi çalıştırılır.
Şu anda Chrome'da doküman başına aynı anda yalnızca bir görüntüleme geçişi çalıştırılabilir. Yeni bir görünüm geçişi başlatmak için bu demoda hızlı bir şekilde tıklamayı deneyin. Yeni bir geçiş başladığında devam eden geçişin sona erdiğini fark edersiniz.
Yanlış kanı 3: Tarayıcı desteği nedeniyle görünüm geçişlerini uygulayamazsınız
Birçok geliştirici, yalnızca Chrome'da desteklendiği için görüntüleme geçişlerini uygulayamayacaklarından endişe duymaktadır. Safari'nin bu konuda çalıştığını ve gelecekteki Safari 18 sürümüne dahil edeceğini belirtmek isteriz.
Ancak kesintili tarayıcı desteğinin bugün görünüm geçişlerini uygulamanızı engellemesine izin vermeyin. Görünüm geçişleri, aşamalı geliştirme için mükemmel bir malzemedir. Orijinal belgelerde, bu yöntemi kodunuza eklemeye yönelik bir yöntem paylaşılmıştır.
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Tarayıcınız aynı doküman görünümü geçişlerini destekliyorsa zenginleştirilmiş, animasyonlu sürümü elde edersiniz. Tarayıcınız çalışmıyorsa mevcut deneyimden yararlanabilirsiniz. Zaman içinde, görüntüleme geçişlerini destekleyen tarayıcıların sayısı arttıkça bu zenginleştirilmiş sürümü otomatik olarak daha fazla kullanıcı deneyimleyecektir.
Aynı durum belgeler arası görüntüleme geçişleri için de geçerlidir. Bunları desteklemeyen tarayıcılar, stil sayfalarını ayrıştırırken CSS etkinleştirmesini yoksayar.
Bu örnek olayda ayrıntılı olarak açıklandığı gibi, bu yaklaşım e-ticarette başarıyla uygulandı
Yanlış kanı 4: Görüntüleme geçişleri, artımlı oluşturmayı kesintiye uğratıyor
Görüntüleme geçişlerinin artımlı oluşturmayı bozduğu hak talepleri vardır. Bu doğru değildir: Belgeler arası görüntüleme geçişlerinin web'in bu temel özelliğini bozmaması amaçlanmıştır.
Tarayıcılar "yeterli" içeriğe sahip olduklarında sayfayı oluşturmaya başlar. Bu, çoğu tarayıcıda <head> içindeki tüm stil sayfalarını yükledikten, <head> içinde oluşturmayı engelleyen tüm JavaScript'leri ayrıştırdıktan ve yeterli işaretlemeyi yükledikten sonra gerçekleştirilir. Belgeler arası görünüm geçişleri bu durumu değiştirmez: İlk Contentful Paint için gereken içerik değiştirilmez. Bu ilk oluşturma işleminden sonra, tarayıcı yeni alınan içeriği kademeli olarak oluşturabilir ve oluşturabilir.
DOM'de belirli bir öğe mevcut olana kadar oluşturma işlemini engellemeyi seçebilirsiniz. Bu, görünüm geçişine katılan öğelerin yeni sayfada mevcut olduğundan emin olmak istediğiniz durumlarda kullanışlıdır.
Bunu yapmak için şu bağlantı etiketini kullanın:
<link rel="expect" blocking="render" href="#elementId">
Bu, tarayıcının ilk oluşturma işleminin ne zaman gerçekleştirileceğine karar vermek için kullanılan buluşsal yöntemlerini geçersiz kılar: İlk oluşturma işlemi, belirtilen öğe DOM ağacında mevcut olana kadar gecikir.
Bu manuel engelleme özelliği, yerleşik bazı koruma önlemlerine sahiptir. Örneğin, </html> kapanış etiketi görüldüğü halde engelleyen öğe görünmüyorsa oluşturma işlemi artık engellenmez. Ayrıca, engelleme özelliğini istediğiniz zaman kaldıran kendi zaman aşımı mantığınızı ekleyebilirsiniz.
Oluşturma engelleme özelliği dikkatli bir şekilde kullanılmalıdır. Oluşturmayı engellemenin etkisi, tek tek örnekler ele alınarak değerlendirilmelidir. Performans metrikleriniz üzerindeki etkiyi ölçerek blocking=render ürününün kullanıcılarınız üzerindeki etkisini aktif bir şekilde ölçemiyorsanız ve ölçemiyorsanız varsayılan olarak blocking=render kullanmaktan kaçının.
Yanlış kanı 5: Anlık görüntü oluşturma işlemi yavaş veya pahalıdır
View Transition API, yeni görünümü hazırlarken ve anlık görüntülerini alırken eski görünüm kullanıcı tarafından görülebilir durumda kalır. Bu nedenle, kullanıcı görüntüleme geçişlerinin olmadığı duruma kıyasla eski sayfayı biraz daha uzun süre görebiliyor. Ancak bu gecikme kayda değer değildir, gerçekte yalnızca birkaç karedir. Örneğin, pageswap öğesinin Chrome'da etkisi en fazla iki eski kare olur: Mantığın çalıştırılması için bir kare ve anlık görüntülerin birleştirilip önbelleğe alınmasını sağlamak için fazladan bir kare.
Ayrıca, anlık görüntülere ait veriler doğrudan birleştiriciden alındığından, anlık görüntü verilerini almak için ek düzen veya yeniden boyama adımları gerekmez.
Ekstra Yanlış Kavram: View Transitions API
Görüntüleme geçişlerinden bahsederken genellikle "View Transitions API"den bahsederler. Bu yanlış. API'ye "View Transition API" adı verilir. Tek bir "Geçiş" olduğuna dikkat edin.
Bu yanılgı, bazı makalelerden (bir noktada DCC ile ilgili kendi dokümanlarımız dahil) yanlış terimin kullanılmasından kaynaklanmaktadır.
Doğru adı hatırlamanın püf noktası, (bir veya daha fazla) görünüm geçişi oluşturmak için (bir) View Transition API'yi kullanmaktır.