View Transition API'si, iki durum arasında animasyonlu bir geçiş oluştururken DOM'u tek bir adımda güncellemenizi sağlar.
Bu tür geçişler, ben de dahil olmak üzere geliştiricilerin sıkça talep ettiği bir özellikti. Bu özelliği, iyi varsayılan ayarlar ile genişletilebilirlik ve özelleştirme arasında denge sağlayacak şekilde sunmayı başardık. Kendimizi alkışlıyoruz gibi görünüyor. Ancak bu özelliğin tasarımında geliştirici geri bildirimleri çok önemli bir rol oynadı. Bu özelliğin eski bir prototipi çok daha az esnekti ve prototipleri deneyip geri bildirim sağlamak için zaman ayıran insanlar (sizin gibi) tamamen yeni bir düşünceyi tetikledi. Teşekkürler!
Özelliği kavramak ve demoları denemek için kılavuzumuza göz atın. Burada değinilmediğini düşündüğünüz bir konu varsa lütfen Twitter, Mastodon veya e-posta üzerinden bize ulaşın.
View Transition API şu anda yalnızca Chrome'da sunulmaktadır. Neyse ki progresif bir geliştirme olarak kullanılabilir. Kılavuz, tarayıcılarda kullanabileceğiniz bir yardımcı işlev içerir ancak animasyonu yalnızca görüntüleme geçişlerini destekleyen tarayıcılar alır.
Bu özelliği, diğer tarayıcı sağlayıcılarının ve bağımsız çalışanların görüşlerinin de yardımıyla CSS Çalışma Grubu bünyesinde geliştirdik. Diğer tarayıcıların Görüntüleme Geçişlerini uygulayıp uygulamayacağını veya ne zaman benimseyeceğini bilmiyoruz ancak Mozilla'nın standart konumunu ve WebKit'in standart konumunu göz önünde bulundurun.
Ancak henüz işi bitirmedik!
Chrome 111'deki işlevsellik sadece ilk sürümdür. Tüm hataları önceden bulduğumuzu umuyoruz. Ancak, bulduğunuz sorunları lütfen crbug.com adresinden (tercihen azaltılmış bir demoyla) bildirin. Bu konu hakkında bilginiz yoksa Twitter, Mastodon veya e-posta üzerinden bize ulaşabilirsiniz. Size yardımcı olabiliriz.
Bu sürüm, daha büyük resmin küçük ama faydalı bir parçası. Bugün göndereceğimiz parçaların gelecekte de uyumlu olmasını sağlamak için, bu özellikle ilgili bazı uzantılar önceden belirledik.
Neler düşündüğümüzün kısa bir önizlemesini burada bulabilirsiniz. Bunlar öncelik sırasına göre değildir (bunun pek çok kişi için ilki en önemlisi olabilir), sizin için en önemli olan eklemelerle ilgili geri bildirimde bulunmak isteriz.
Dokümanlar arasında geçiş yapma
Sanırım çoğu geliştiricinin üzerinde çalışmamızı istediği bir sonraki konu bu ve neyse ki zaten bunun üzerinde çalışıyoruz!
View Transitions API, aynı kaynak dokümanlarda çalışabilecek şekilde tasarlanmıştır. Tek fark, startViewTransition simgesi DOM durumu değişikliğini belirtmek yerine navigasyonun kendisi bu değişikliğin sinyalini verir.
chrome://flags/#view-transition-on-navigation bayrağının arkasındaki prototipimiz. Burada son derece basit bir demo, daha karmaşık bir demo bulabilirsiniz.
Bunu sürdürmek için her bir sayfanın geçişe nasıl dahil olacağını belirlememiz gerekiyor. Şu anda bir meta etiket kullanıyoruz: <meta name="view-transition" content="same-origin"> ancak CSS'nin bunun için daha iyi bir yer olduğunu düşünüyoruz. Ayrıca, tercihen JavaScript yazmanıza gerek kalmadan ne tür bir sayfadan geçiş yaptığınızı bilmeyi de kolaylaştırmak istiyoruz.
Yapılacak çok iş var ve biz bu işi 'hızlı' yerine 'doğru'ya ulaştırmayı tercih ediyoruz, ancak bizim için kesinlikle öncelikli bir konu.
Birleştirici tarafından yönlendirilen animasyonlar
Özelleştirmesi çok daha kolay olduğundan, geçiş gruplarında genişliği ve yüksekliği varsayılan olarak canlandırmayı seçtik. Ancak bu, animasyonun ana iş parçacığında çalışacağı anlamına gelir. Bu, özellikle sayfa yüklemeleri sırasında ideal değildir.
Varsayılan animasyonları ve genel özelleştirmeleri algılamayı planlıyoruz. Ardından bunları iyi bir performans artışı için düzenleyici tarafından yönetilen animasyonlar olarak yeniden yorumlayacağız.
Kapsamlı geçişler
Şu anda, SPA geçişleri dokümanın tamamını kapsamaktadır 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 öğe kapsamına alınmasını sağlayan bir özelliği kullanıma sunmak istiyoruz.
Bu, örneğin yerleştirilmiş bir video oynatıcının yerleştirilmiş bir sohbet widget'ıyla aynı anda görüntüleme geçişlerini kullanmasına olanak tanır.
İç içe geçiş grupları
Şu anda tüm ::view-transition-group kullanıcıları kardeştir. Bu, görünümlerin bir kapsayıcıdan diğerine geçmesine olanak tanıdığı ve kırpma konusunda endişelenmeniz gerekmediği için genellikle iyi bir şeydir.
Ancak, bazen bir görünümden bazı üst öğeler tarafından kırpılmasını isteyebilirsiniz. Bu, geçişe dahil olabilir.
Belirli bir ::view-transition-group öğesini başka bir ::view-transition-group içine yerleştiren bir etkinleştirme işlemini araştırmak istiyoruz.
Geçiş sınıfları
Her view-transition-name benzersiz olmalıdır. Bu şekilde, tam anlamıyla aynı öğe olmasa bile belirli bir öğenin, DOM değişikliğinin her iki tarafında da kavramsal olarak "aynı" olduğunu belirleriz.
Ancak, bazen farklı view-transition-name'lere sahip öğelerde aynı tür animasyon kullanılmalıdır. Şimdilik bu, her view-transition-name için bir seçici kuralı eklemek anlamına gelir.
Bu sınırlamanın üstesinden gelmek için geçiş sınıfları oluşturabileceğiniz bir yöntem eklemek istiyoruz.
Ekran dışı öğeleri yoksay
Bir öğeye view-transition-name verirseniz bu öğe, kendi grubu olarak geçişe dahil olur. Bu bazen ideal olmaz. Örneğin, bir başlığa view-transition-name verirseniz ve sayfayı 2000 piksel aşağı kaydırdığınız bir durumdan sayfanın üst kısmındaki bir duruma geçerseniz başlık 2000 piksel uzakta olacak şekilde animasyon oluşturur ve zamanlama açısından yanlışmış gibi hissedersiniz.
Bunun yerine, view-transition-name içermeyen ve tamamen görüntü alanının dışında kalan öğelerin yok sayılacağı bir etkinleştirme seçeneği eklemek isteriz.
style.viewTransitionName dinamik bir şekilde ayarlanarak JavaScript ile bunu zaten yapabilirsiniz, ancak bunun için bildirim temelli bir çözümün olması gerektiğini düşünüyoruz.
requestAnimationFrame destekli animasyonlar
Zaten web animasyonları API'sı aracılığıyla JavaScript ile görüntüleme geçiş animasyonları oluşturabiliyorsunuz, ancak bazen requestAnimationFrame ile işleri kare kare kaydırmanız gerekiyor.
Bunu zaten yapabilirsiniz ama biraz can sıkıcı bir hale gelir. Yararlı bulabileceğiniz bazı yardımcıların yer aldığı bir demoya buradan ulaşabilirsiniz. Verileri korsan olmayan bir hale getirmek istiyoruz!
Bunu iki bölümde uygulayacağız. Birincisi, animasyonun ne zaman bittiğini belirtmek için bir API sağlayarak. İkincisi ise sözde öğelere JavaScript erişimi sağlayarak. Bu ikinci kısım oldukça büyük bir iş olabilir ama uzun vadede kulağa doğru bir şey geliyor.
Şimdi harika görünüm geçişleri yapın!
Umarım siz de benim gibi bu özelliğin şimdiki hali ve geleceği konusunda heyecan duyuyorsunuzdur. Geri bildiriminiz varsa veya yalnızca yaptığınız görüntüleme geçişlerini göstermek istiyorsanız (ör. sorunsuz ve işlevsel ya da sadece neşeli olması halinde lütfen Twitter veya Mastodon'dan bize ulaşın.