View Transition API, iki durum arasında animasyonlu bir geçiş oluştururken DOM'u tek adımda güncellemenize olanak tanır.
Bu tür geçişler, benim de dahil olduğum geliştiriciler tarafından sıklıkla istenen bir özellikti. Bu özelliği, iyi varsayılan ayarları genişletilebilirlik ve özelleştirmeyle dengeleyecek şekilde sunmayı başardığımızı düşünüyorum. Bu, kendimizi övüyormuşuz gibi görünse de bu özelliğin tasarımında geliştirici geri bildirimleri önemli bir rol oynadı. Bu özelliğin daha önceki bir prototipi çok daha az esnekti ve prototiplerle oynayıp geri bildirimde bulunan kullanıcılar (sizin gibi mi?) özelliğin tamamen yeniden düşünülmesini sağladı. Teşekkürler!
Özelliği öğrenmek ve bazı denemelerle oynamak için rehberimize göz atın. Bu makalede ele alınmadığını düşündüğünüz bir konu varsa lütfen Twitter, Mastodon veya e-posta üzerinden bana ulaşın.
View Transition API şu anda yalnızca Chrome'da kullanılabilir. Neyse ki aşamalı iyileştirme olarak kullanılabilir. Kılavuzda, tarayıcılarda kullanabileceğiniz bir yardımcı işlev yer alır ancak animasyon yalnızca görüntü geçişlerini destekleyen tarayıcılarda gösterilir.
Bu özelliği, CSS Çalışma Grubu'nda diğer tarayıcı tedarikçi firmalarının ve bağımsızların katkılarıyla geliştirdik. Diğer tarayıcıların Görünüm Geçişleri'ni kullanıp kullanmayacağını veya ne zaman kullanacağını bilmiyoruz. Ancak Mozilla'nın standartlar konusundaki konumunu ve WebKit'in standartlar konusundaki konumunu takip edin.
Ancak henüz "bitmedi".
Chrome 111'de kullanıma sunulan işlev, bu özelliğin ilk sürümüdür. Tüm hataları tespit ettiğimizi umuyoruz. Ancak bulduğunuz sorunları lütfen crbug.com adresinde bildirin. Tercihen, azaltılmış bir demo da ekleyin. Bu konuda bilginiz veya deneyiminiz yoksa Twitter, Mastodon veya e-posta üzerinden bana ulaşabilirsiniz.
Bu sürüm, daha büyük bir resmin küçük ama umarım faydalı bir parçasıdır. Şu anda gönderdiğimiz parçaların gelecekte de uyumlu olmasını sağlamak için bu özellikte bazı uzantılar planladık.
Planlarımızı önizlemek için bu makaleyi inceleyebilirsiniz. Bu özellikler öncelik sırasına göre listelenmemiştir (ilki birçok kullanıcı için en önemlisi olabilir). Bu nedenle, sizin için en önemli eklemeler hakkında geri bildirimlerinizi öğrenmekten memnuniyet duyarız.
Dokümanlar arasında geçişler
Çoğu geliştiricinin, üzerinde çalışmamızı istediği bir sonraki özellik bu. İyi haber şu ki, bu özellik üzerinde zaten çalışıyoruz.
Görüntü Geçişleri API'si, aynı kaynaktaki dokümanlarda çalışacak şekilde tasarlanmıştır. Tek fark, DOM durum değişikliğini startViewTransition yerine gezinmenin kendisi işaretlemesidir.
chrome://flags/#view-transition-on-navigation işaretinin arkasında bu prototipimiz yer alıyor. Aşağıda süper basit bir demo ve daha karmaşık bir demo verilmiştir.
Bu süreci ilerletmek için her sayfanın geçişi nasıl etkinleştirdiğini anlamamız gerekiyor. Şu anda <meta name="view-transition" content="same-origin"> meta etiketini kullanıyoruz ancak bunun için CSS'nin daha iyi bir yer olduğunu düşünüyoruz. Ayrıca, tercihen JavaScript yazmak zorunda kalmadan, geçiş yaptığınız sayfanın türünü öğrenmeyi kolaylaştırmak istiyoruz.
Yapılacak çok iş var ve bu özelliği "hızlı" yerine "doğru" bir şekilde kullanıma sunmayı tercih ediyoruz. Ancak bu özellik kesinlikle bizim için öncelikli.
Oluşturucu tarafından yönlendirilen animasyonlar
Özelleştirmesi çok daha kolay olduğu için geçiş gruplarında genişlik ve yüksekliği varsayılan olarak animasyonlu hale getirmeyi seçtik. Ancak bu, animasyonun ana iş parçacığında çalıştığı anlamına gelir. Bu durum, özellikle sayfa yükleme sırasında ideal değildir.
Varsayılan animasyonları ve yaygın özelleştirmeleri tespit etmeyi, ardından performansı artırmak için bunları oluşturucu tarafından yönlendirilen animasyonlar olarak yeniden yorumlamayı planlıyoruz.
Kapsamlı geçişler
Şu anda SPA geçişleri belgenin tamamı için geçerlidir ve aynı anda yalnızca bir geçiş çalıştırılabilir. Birden fazla sayfa bileşeninin geçişleri bağımsız olarak çalıştırabilmesi için geçişlerin belirli bir öğeyle sınırlandırılmasına olanak tanıyan bir özellik sunmak istiyoruz.
Bu sayede, yerleşik bir video oynatıcının yerleşik bir sohbet widget'ıyla aynı anda görüntü geçişlerini kullanması sağlanabilir.
İç içe yerleştirilmiş geçiş grupları
Şu anda tüm ::view-transition-group öğeleri kardeştir. Bu durum, görüntülemelerin bir kapsayıcıdan diğerine geçiş yapmasına olanak tanıdığı ve kırpma konusunda endişelenmenize gerek olmadığı için genellikle iyi bir şeydir.
Ancak bazen bir görünümün, geçişte de yer alabilecek bir üst öğe tarafından kırpılmasını isteyebilirsiniz.
Belirli bir ::view-transition-group'yi başka bir ::view-transition-group içine yerleştiren bir etkinleştirmeyi incelemek istiyoruz.
Geçiş sınıfları
Her view-transition-name benzersiz olmalıdır. Bu şekilde, belirli bir öğenin tam olarak aynı öğe olmasa bile DOM değişikliğinin her iki tarafında da kavramsal olarak "aynı" olduğunu belirleriz.
Ancak bazen farklı view-transition-name'lere sahip öğeler aynı animasyon türünü kullanmalıdır. Şu anda bu, her view-transition-name için bir seçici kuralı eklemek anlamına geliyor.
Bu sınırlamayı aşmak için geçiş sınıfları oluşturmanın bir yolunu eklemek istiyoruz.
Ekran dışındaki öğeleri yoksayma
Bir öğeye view-transition-name verirseniz bu öğe, kendi grubu olarak geçişe dahil edilir. Bazen bu durum ideal olmayabilir. Örneğin, bir başlığa view-transition-name verirseniz ve sayfayı 2.000 piksel aşağı kaydırdığınızda sayfanın üst kısmına giderseniz başlık 2.000 piksel uzaktan animasyonla gösterilir. Bu da zamanlama açısından yanlış bir durumdur.
Bunun yerine, tamamen görüntü alanının dışındaysa view-transition-name yokmuş gibi bir öğenin yoksayılacağı bir etkinleştirme seçeneği eklemek istiyoruz.
style.viewTransitionName değerini dinamik olarak ayarlayarak bunu JavaScript ile zaten yapabilirsiniz ancak bunun için açıklayıcı bir çözümümüz olması gerektiğini düşünüyoruz.
requestAnimationFrame tarafından desteklenen animasyonlar
Web animasyonlar API aracılığıyla JavaScript ile görüntü geçiş animasyonları oluşturabilirsiniz ancak bazen requestAnimationFrame ile işlemleri kare kare yürütmeniz gerekir.
Bunu zaten yapabilirsiniz ancak biraz karmaşıktır. Yararlı bulabileceğiniz bazı yardımcı araçları içeren demoyu buradan inceleyebilirsiniz. Bu özelliğin "hack" olarak algılanmasını istemiyoruz.
Bu işlemi iki bölümde gerçekleştireceğiz. Birincisi, animasyonun ne zaman tamamlandığını belirtmek için bir API sağlayarak. İkincisi, JavaScript'e sözde öğelere erişim izni vererek. Bu ikinci kısım oldukça büyük bir iş olabilir ancak uzun vadede doğru şey gibi görünüyor.
Şimdi gidip harika görüntü geçişleri oluşturun.
Umarım bu özelliğin şimdiki ve gelecekteki durumu hakkında benim kadar heyecanlısınızdır. Geri bildiriminiz veya sürükleyici ve işlevsel ya da basit saçma görüntü geçişlerinizi göstermek isterseniz lütfen Twitter veya Mastodon üzerinden bana ulaşın.