Bu makalede, web uygulamalarındaki keskin ve sarsıcı geçişleri, animasyonların desteğiyle nasıl daha zarif ve akıcı hale getirebileceğimizi inceliyoruz.
View Transitions API Nedir?
View Transitions API, web uygulamalarında farklı görünümler arasında animasyonlu geçişler oluşturmayı sağlar.
Amaç, kullanıcılara iki görünüm arasında keskin bir sayfa yenilemesi yerine zarif bir geçiş deneyimi sunmaktır.
Geleneksel web uygulamalarında görünüm değiştiğinde; kullanıcılar aşağıdaki videodaki gibi anlık, sarsıcı bir geçiş hissetmektedir. Bu normal gibi görünse de, view transitions mekanizması ile karşılaşana kadar :)
View Transitions API sayesinde tarayıcı, DOM güncellendiğinde veya yeni bir sayfaya geçtiğinde; bu değişimi animasyonlu biçimde işler. Böylece geçişler aşağıdaki videodaki gibi daha doğal, akıcı ve kullanıcı dostu hale gelir.
Kazanımlar
Gelişmiş algılanan performans: View transitionlar, main thread'i (ana iş parçacığını) bloke etmediklerinden dolayı, tarayıcı yavaşladığında bu geçişler çalışmaya devam etmektedir. Animasyonlar, yeni içeriğin yüklenmesi için gereken süreyi maskeler. Site yavaş olsa bile kullanıcıya hızlı hissettirmeye yardımcı olmaktadır. Bu nedenle algılanan performansı geliştirmektedir.
İlgi çekici kullanıcı deneyimi: Kullanıcıların ilgisini çekecek bir görsel deneyim oluşturur. Web sitesinde bağlamda kalmayı kolaylaştırır ve daha iyi odaklanma sağlar. Okuma sırasındaki karmaşıklık sorunlarına çözüm olur. Geçişin sürekliliği, kullanıcıların farklı görünümler arasındaki ilişkiyi anlamalarına yardımcı olur.
Karmaşık CSS, JavaScript kodlarından kurtulmak: Kusursuz animasyonlar eklemek için genellikle karmaşık CSS yazmayı, JavaScript tabanlı geçişleri yönetmeyi veya third-party uygulamalar kullanılabilir. Bu hem zaman alıcı hem de performans sorunlarını ele almayı gerektirir. View Transitions API, bu karmaşıklığı azaltır. Temiz koda yaklaştırır.
Farklı JavaScript framework'lerinde kullanımı: View Transtions API yaklaşımını kullanan Vue, Angular, React gibi farklı JavaScript frameworkleri, Transitions componentleri veya view transitions yapısını kullanan yapılar sunmaktadır. Bu nedenle, teknoloji bağımsız bir mimari sunar.
Bu mekanizma uygulama tipine ve tetikleme yöntemine göre ikiye ayrılır.
Same-document View Transitions
Görünüm geçişlerinin aynı sayfadaki iki farklı DOM durumu arasında animatik bir şekilde sağlanmasıdır.
Tek sayfa uygulamalarında - Single Page Applications (SPA) - yaygın olarak kullanılmaktadır.
Aşağıdaki videoda ürüne tıklandığında ürün detayı aynı sayfada değişiyor. Ürünle alakalı kapak fotoğrafı, ürün adı gibi elemanlar animasyon kullanılarak görünümü aynı sayfa içerisinde değişmektedir.
Farklı elementler arasında geçişlerin kurgulanması
İhtiyaca göre bir elementin animasyonunu sayfanın geri kalanından
farklılaştırmak için elemente view-transition-name değeri atanabilir. Geçiş sırasında elementi benzersiz olarak
işaretleyebilmek için kullanılan bir özelliktir ve bu değer tekil olmalıdır.
Aynı sayfada aynı view-transition-name değerine sahip birden fazla element bulunursa geçiş gerçekleşmez. Örnek HTML bloğunda değer ataması inline CSS satırında yapıldı.
|
| view-transition-name ile ayrıştırılmış HTML blokları |
|
| view-transition-name HTML elementlerinde kullanımı |
Nasıl Tetiklenir?
JavaScript dosyasında DOM manipülasyonunu yapacak kod bloğunu sarmallayan document.startViewTransition fonksiyonu çağrılır.
Bu fonksiyon çağrıldığında, CSS property'si view-transition-name olarak belirtilmiş bütün elementlerin mevcut halinin anlık görüntüsünü alır (snapshot) ve startViewTransition fonksiyonundan çağrılan ve DOM'da değişikliği yapacak fonksiyon (callback) çalıştırılır.
snapshot, View Transitions API tetiklendiği anda tarayıcının ilgili DOM elementlerini birer bitmap görüntüsüne dönüştürmesidir. Tarayıcı, geçiş sürecinde canlı DOM elementlerini değil, bu elementlerin o anki 'donmuş' görsel kopyalarını (::view-transition-old ve ::view-transition-new) kullanır.
|
| Mevcut durum - Tarayıcı, mevcut durumun görüntüsünü alır. |
|
| Callback fonksiyonu tarafından DOM güncellemelerinin yapılması |
DOM güncelemesi tamamlandıktan sonra tarayıcı, yeni durumun da anlık görüntüsünü alır.
|
| Güncellenen yeni durum - Tarayıcı, yeni durumun da görüntüsünü alır. |
Yeni durum yakalandıktan sonra aşağıdaki gibi pseudo-element-tree yapısını oluşturur. Geçiş sırasında bulunur, tamamlandığında kaybolur.
Bu yapıyı detaylandırmak gerekirse; katmanlı bir yapıdır.
|
| https://codepen.io/bramus/full/xxQKvJP |
Kullanıcının web sayfasında görüntüleyebildiği alan olan viewport'u dolduran en üst seviyedeki - root - element olan ::view-transition, tüm geçişleri içerir.
::view-transition-group, pozisyon ve boyuttan sorumludur ve ilgili elementleri gruplar.
::view-transition-image-pair, önceki ve yeni snapshotları içerir.
::view-transition-new, yeni durumun snapshot'ini tutar.
::view-transition-old, önceki durumun snapshot'ini tutar.
::view-transition-new(root) ve ::view-transition-old(root) elementleri fades-in ve fades-out
animasyonları ile çalışır.
Alınan snapshotlar CSS pseudo-element-tree düzenlenir ve CSS animasyonları sayesinde canlandırılır. Eski ve yeni anlık görüntüler arasındaki geçişler zarif bir şekilde yapılır.
|
| Animasyon desteği ile tarayıcı, eski ve yeni durum arasında geçişi tamamlar. |
Geçişin yapıldığı varsayılan animasyon yaklaşımı, cross-fade (fades-in/out) olmaktadır. İsteğe bağlı olarak CSS ile farklı animasyon özelliği kullanılabilir.
Geçişlerin özelleştirilmesi
Oluşturulan her bir sözde element, CSS ile değerleri özelleştirilebilir. View transitionlar, CSS animasyonlarını kullandığından mevcut CSS animasyon özellikleri ile özelleştirilebilir. Tarayıcı, çoklu geçiş grupları yakaladığında, çoklu view transitions oluşturmaz. Onun yerine tarayıcı tek bir view transition altında birden fazla geçiş gruplarını kapsar.
startViewTransition bütün tarayıcılarda ve JavaScript framework'lerinde desteklenmemektedir. Desteklenmese bile kullanıcıların web sitede normal bir şekilde kullanabilmelerinin sağlanması gerekir. Bu nedenle aşağıdaki gibi if kontrolü eklenmesi en iyi pratiktir.
Tekrar Eden Elementler ve Çözüm Stratejisi
Class name farklı fakat aynı HTML kod bloğunu kullanan yapı artıyorsa bir problem var.
Buna en güzel örnek; ürün listesindeki ürünlerin yönetimi verilebilir.
2-3 adet ürün olmasında sorun olmayabilir fakat düzenli olarak artıyorsa her bir element için yeni bir view-transition-name tanımlayıp, tanımlanan tekil ismi view-transition-group özelliğine parametre geçilmesi gerekir ki bu sürdürülebilir, ölçeklenebilir bir yaklaşım değildir.
|
| Tekrar eden element problemi |
Tekrar eden elementlerin aynı şekilde canlandırılması ve dinamik yönetilmesi için view-transition-class property kullanılabilir.
Yukarıdaki video, kart ekle çıkar uygulamasının çalışmasını gösterir. Tekrar eden element yönetimini ve animasyon sürecini anlatan güzel bir örnektir.
Cross-document View Transitions
Farklı sayfalardaki görünüm geçişleri, aynı sayfa üzerindeki görünüm geçişleriyle aynı prensiplere ve yapı taşlarına sahiptir fakat API metodu çağrılması gerekmez.
Çoklu sayfa uygulamalarında -Multiple page applications (MPA) - yaygın olarak kullanılır.
Aşağıdaki videoda same-document view transitions'ten farklı olarak ürüne tıklandığında ürün detay sayfasına yönlendiriliyor ve adres çubuğundaki link değişmektedir. İki sayfa arasındaki geçişin akıcı olduğu görülmektedir.
Web sitesini ziyaret eden kullanıcının tıkladığı link sonucu CSS animasyonlarıyla geçişler desteklenir. İki farklı sayfa arası animatik geçişleri sağlayabilmek için sağlanması gereken iki koşul bulunmaktadır.
Koşul 1: İki sayfa arasında view transition uygulanması isteğe bağlıdır ve CSS dosyasına aşağıdaki kod bloğu eklenerek aktif edilir.
Koşul 2: MPA yapılarında "view transitions" özelliğinin çalışabilmesi için iki sayfaya ait URL'de protokol, hostname ve port bilgileri aynı olmalıdır. (same origin)
| Kaynak | Hedef Site | Same/Cross Origin |
| https://xyz.com/page.html | https://xyz.com/test | Same |
| https://xyz.com/about | Same | |
| http://xyz.com/page.html | Cross | |
| https://xyz.com:81/about | Cross | |
| https://admin.xyz.com | Cross |
Nasıl Tetiklenir?
Sayfalar arası geçişlerin sağlanması için, CSS dosyasında, view-transition kod bloğundaki navigation özelliğine auto değeri verilmelidir. Bu tanımla birlikte traverse, push veya replace gibi farklı navigasyon tiplerinin çalışmasına izin verilir. İlgili web sitesine ait sayfa geçmişi üzerinden geri/ileri olarak gidilmek istendiğinde view transitionsların çalışmasını sağlar. (history traversal)
Navigasyonlar aşağıdaki süreçlerde view transition özelliğini kullanamaz.
- Sayfanın "sık kullanılanlar" bölümünden açılması
- Tarayıcı adres çubuğundan diğer sayfaya erişilmesi
- Kullanıcı/herhangi bir script tarafından başlatılan yeniden yüklemeler
Gezinmelerin uzun sürmesi - Chrome tarayıcısında bu süre 4 saniyedir. - TimeoutError DOMException hatası fırlatır.
pageswap - pagereveal eventleri
Cross-document view transitions'nin çalışma mantığını sağlayan eventlerdir.
pageswap
pageswap olayı, bir sayfa yenisiyle değiştirileceği anda tetiklenir. Kullanıcı başka bir sayfaya gider. Tarayıcı, mevcut sayfayı terk ederken ama henüz yenisini göstermediği sırada çalışır.
|
| pageswap eventi |
pagereveal
Yeni sayfa tarayıcıda ilk kez görüntülendiğinde tetiklenir. Yeni belge yüklenir. Tarayıcı, yeni sayfayı görünür hale getirir.
|
| pagereveal eventi |
- Kullanıcı A sayfasından B sayfasına gider
- A sayfası pageswap olayı alır → Snapshot hazırlanır
- Tarayıcı B sayfasını yükler
- B sayfası pagereveal olayı alır → Transition oynatılır
Ekstra Konular
Sade ve Anlaşılır Dokümantasyon
Chrome'nin geliştiriciler için sunduğu chrome for developers sitesinde View Transitions API için özel bir bölüm yer almaktadır. Araştırma aşamasında bu makaleden yararlandım ve işin özünü yakalama fırsatım oldu. Chrome ekibindeki Bramus isimli geliştirici, bu konuda bir çok sunum yapmıştır.
Same document ve Cross document view transitions bölümlerindeki örnek kodları ve demoları inceleyebilirsiniz.
View Transtions makalesi için tıklayınız.
Promises
Tarayıcı Desteği
View Transitions API'deki fonksiyonlar veya propertyler her tarayıcıda desteklenmeyebilir ya da kullandığınız versiyon desteklemeyebilir.
Same-document transitions çoğu modern tarayıcıda var. Cross-document (sayfalar arası) daha sınırlı desteğe sahiptir.
Güncel durumda Firefox, cross-document view transitions yapısını desteklememektedir. View transitions özellikleri konusunda Chrome tarayıcısı özelinde konuşmak gerekirse same-document için minimum 111, cross-document için minimum 126 versiyonuna sahip olmak gerekir.
|
| same-document view transitions tarayıcı desteği |
|
|
cross-document view transitions tarayıcı desteği |
Kaynak için
tıklayınız.
Animasyon Debug Edilmesi
Chrome Dev Tools penceresi açıldığında; More Tools - Animations sekmeleri sırasıyla tıklanarak Animations paneline ulaşılır.
|
| Devtools Animation Panel Açılma Adımları |
Adımları seçtikten sonra aşağıdaki gibi panel açılır. Sol üst kısmında animasyonların çalışma hızları ayarlanabilir. Panelin sol kısmında transition çalışması kaynaklı pseudo-element tree yapısı görünür ve ağacın her bir elemanına karşılık gelen animasyon çalışır.
Örneğin; view-transition-old(product-name-1) için fade-out, view-transition-new(product-name-1) için fade-in animasyonu çalışmaktadır.
Özetle;
View Transitions API, yakın zamanlarda ortaya çıkan ve kullanıcıların web sitelerindeki deneyimlerini önemli ölçüde iyileştiren bir araçtır. Tarayıcı desteği arttıkça, projelerde kullanımı yaygınlaşacaktır.
Yazının faydalı olmasını umarak, çalışmalarınızda kolaylıklar diliyorum :)
Kaynaklar
Makalede videolarda kullandığım ürün listeleme ve detay gösterme projesini geliştirdiğim github linki için tıklayınız.
 |
| https://github.com/mertmtn/view-transitions-api-demo |
Yorumlar
Yorum Gönder