Bugün Chrome ve Astro'nun View Transitions API yolculuğu hakkında daha fazla bilgi paylaşmak istiyoruz. Bu bağlamda, Astro topluluğunun API'yi erkenden benimsedi ve API ile yaptığı denemelerden yararlanarak daha geniş bir topluluğun fırsatlarını nasıl ortaya koyduğunu da gördük. Ayrıca, Astro 3.0'daki Görüntüleme Geçişleri için yeni yerleşik destekle ilgili daha fazla bilgi paylaşmaktan heyecan duyuyoruz!
Arka plan
Bir sayfanın farklı durumları arasındaki sorunsuz geçişler (durum geçişleri olarak bilinir), web'de sorunsuz ve animasyonlu deneyimler oluşturmanın her zaman karmaşık bir unsuru olmuştur. CSS geçişleri, CSS animasyonları ve Web Animation API gibi araçların kullanılabilirliğine rağmen, durum geçişleri oluşturmak göz korkutucu bir görev olmayı sürdürdü. Zorluklardan biri, giden öğeler üzerindeki etkileşimi ele almaktır. Bu da geçişleri daha karmaşık hale getirebilir.
Ayrıca, yardımcı cihazlarda okuma konumunu ve odağı korumak zordur. Ayrıca, kaydırma konumu farklılıklarını çözmek de durum geçişlerini külfetli bir süreç haline getirir. Tüm bu faktörler, bir web sayfasındaki çeşitli öğeler arasında yumuşak geçişlerin uygulanmasının karmaşıklığına katkıda bulunur.
Tarayıcının bu sorunlara çözüm olarak View Transitions API'si ortaya çıktı. Bu yeni API, iki durum arasında animasyonlu geçiş oluştururken tek bir adımda DOM'yi değiştirmek için daha kolay bir yol sunar.
Chrome 111'de View Transitions API'nin kullanıma sunulması, sadece JavaScript tabanlı web uygulamaları için değil tüm web siteleri için daha geniş bir geçiş desteği vizyonunun başlangıcı oldu. Gelecekte geliştirmeler de planlanmaktadır. Chrome, gelecekte dokümanlar arası geçişler, birleştirici tarafından sağlanan animasyonlar, kapsamlı geçişler ve iç içe yerleştirilmiş geçiş grupları gibi heyecan verici eklemeleri keşfedebilir.
Demoyu ziyaret edin: Canlı, Kaynak
Görüntüleme geçişleriyle ilk keşifler
Chrome'un View Transitions API'deki yolculuğu yalnız değildi. Geliştiriciler, çerçeve yazarları ve CSS Çalışma Grubu'ndan gelen geri bildirimler ve işbirliği, birkaç yıl boyunca özelliğin şekillendirilmesinde çok önemli bir rol oynadı.
İlk zamanlarda geliştirici denemeleri kritik bir rol oynadı. API'nin ilk sürümleri CSS animasyonlarını desteklemiyordu ve geçişler birkaç kısıtlayıcı hazır ayarla kısıtlanmıştı. İlk geri bildirimler, geliştiricilerin geçişlerin tamamen özelleştirilebilir ve etkileyici olmasını istediklerini açıkça gösteriyordu. Bu karşılıklı çalışma, API'nin iyi varsayılanlar, genişletilebilirlik ve özelleştirme dengesi ile tasarlanmasını sağladı.
Astro, Geçişleri Görüntüleme konusuna erkenden odaklanan çerçevelerden biriydi. Bu makalenin geri kalanı, Astro ekibinin bakış açısıyla yazılmıştır ve Görünüm Geçişlerini bulgu, benimseme ve web geliştirme deneyiminin odak noktası haline getirmedeki deneyimlerini paylaşmaktadır.
Görüntüleme geçişlerine neden Astro bahse giriyor?
Astro uzun süredir Geçişleri Görüntüleme gibi bir özellik arıyordu. Astro, daha hızlı sayfa yükleme performansı için kullanıcı arayüzü bileşenlerinizi hafif HTML'ye sunucu oluşturan bir JavaScript web çerçevesidir. Astro, istemci cihazından olabildiğince fazla işi kasıtlı olarak gönderiyor. Astro web siteleri, yerel tarayıcı sayfa gezinmesini kullanır. Diğer web çerçeveleri bunun yerine JavaScript istemci tarafı yönlendirmesi ile tarayıcı gezinmesini ele geçirebilir.
Bu ödün verme işlemi, Astro ekibi için bir zorluk oluşturdu: Astro, sayfa geçişlerini nasıl canlandırabilir ve istemci taraflı yönlendirmeyi kullanmadan sayfalar arasında uygulama benzeri kullanıcı arayüzü kalıcılığını nasıl sağlayabilir?
Doğru cevap, Geçişleri Görüntülemeti. Astro, Görünüm Geçişleri sayesinde JavaScript ağırlıklı SPA web çerçevelerinin sunduğu yönlendirme özelliklerinin aynısını kullanabiliyordu, ancak istemci taraflı yönlendirmenin performans ve karmaşıklık ek yükü olmadan. Diğer çerçeveler View Transitions özelliğini isteğe bağlı bir uygulama ayrıntısı olarak ele alıyordu ancak Astro için bu durum çok daha önemliydi.
Astro ekibinin yanıtlaması gereken bir sonraki soru "nasıl?" oldu. Ekip, ilham almak için Turbo, Swup ve Livewire gibi projeleri inceledi ve hatta Astro'da benzer birkaç yaklaşımın prototipini oluşturdu.
İlk denemelerden biri, her yeni HTML sayfasını otomatik olarak mevcut HTML ile karşılaştıran ve JavaScript kullanarak her öğeyi aynı anda değiştirmeye çalışan tam sayfa "akıllı geçiş"i içeriyordu. Akıllıca yapıldı ancak hataya açıktı.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Neyse ki Astro topluluğu, View Transitions API'nin ürünü aşırı karmaşık hale getirmeden zaten güçlü olduğunu gösterdi. İlk demolardan bazılarını gören Astro ekibi, tarayıcı API'leriyle mümkün olduğunca yakın şekilde eşleştirilebilecek basit bir Astro API'sı fikrini satın aldı. Görüntüleme Geçişlerini, Astro'nun içinde gizlenmiş görünmez bir uygulama ayrıntısı olarak görmek yerine, doğrudan geliştiriciye sunulabilirler. Astro'yu doğrudan web platformuyla uyumlu hale getirme ve ön uçtaki genel karmaşıklığı azaltma.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Çalışmalar basitleşti: Yeni View Transitions API'yi Astro'ya getirmek ve mümkün olduğunca çok web sitesine ve tarayıcıya getirilecek otomatik yedekler sağlamak. Chrome dışındaki çoğu tarayıcı, yerel Görüntüleme Geçişleri için henüz tam destek sağlamadığından yedek destek gereklidir.
Astro'da resmi destek lansmanı
Astro, Astro 2.9'da deneysel Görüntüleme Geçişleri desteğini kullanıma sundu. Yanıt hemen olumluydu. Geliştiriciler çok sayıda farklı kullanım alanının inanılmaz demolarını paylaşmaya, hatta bazı durumlarda bunların tümünü üretime göndermeye başladı.
Demoyu ziyaret edin: Canlı, Kaynak
Astro 3.0, desteği sonlandırır ve herkes için yeni View Transitions API'nin işaretini kaldırır. Bu yeni API'leri artık deneysel olarak veya tek seferde kullanabilirsiniz.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Astro'yu platform API'leriyle uyumlu hale getirmenin beklenmeyen bir faydası, yerel View Transitions API'nin yanı sıra yeni özellikler oluşturmayı deneme olanağı olmasıdır. Örneğin, yeni Astro transition:persist yönergesi, tüm öğelerin tam sayfa gezinmede kendisini korumasına olanak tanır. Bu, eskiden yalnızca ağır JavaScript SPA'larında mümkün olan bir şey olan kalıcı ses ve video oynatıcılar gibi uzun ömürlü öğeleri destekler.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Demoyu ziyaret edin: Canlı, Kaynak
Astro, Görünüm Geçişlerini geliştirici için daha ergonomik hale getirmekte de serbesttir. Örneğin ekibin özel ileri/geri animasyonları ve dinamik HTML için animasyonlar için desteği zaten eklendi. Bu özelliklerin ikisini de yalnızca alt düzey API'lerle yapmak zordur, ancak Astro'da neredeyse zahmetsizdir.
Bu özellikler şu an için yalnızca Astro'da mevcut, ancak Astro ekibi, ileride gerçekleştirilebilecek tarayıcı geliştirmeleri için deneyimlerini spesifikasyon yazarlarına ve çalışma gruplarına geri vermeyi umuyor. Örneğin, CSS'de animasyonların paylaşılmasını kolaylaştırmak için bir teklifi yakından izleyebilirsiniz.
Sırada ne var?
Web'de Görüntüleme Geçişlerinin geleceği parlaktır. Astro, Nuxt ve HTMX belirli bir dereceye kadar destek sağladılar, diğerleri ise bu programla ilgilendiklerini ifade etti.
Chrome ekibi, Astro'nun yerleşik Görüntüleme Geçişleri desteğinden dolayı çok heyecanlı. Daha akıcı ve dinamik kullanıcı deneyimleri sağlayan bu sürüm, web geliştirme açısından büyük bir adımdır. Geliştiricilerin, Astro 3.0'daki Geçişleri Görüntüleme konusunu ayrıntılı bir şekilde incelemenizi öneririz. İster yeni açılış sayfaları oluşturuyor ister mevcut siteleri yeni sürüme geçiriyor olun, bu geliştirmeler ezber bozucu niteliktedir. Görüntüleme Geçişleri, SPA'larla MPA'larla mümkün olan arasındaki boşluğun doldurulmasına yardımcı oldu. Chrome, SPA ve/veya MPA desteğinde ek boşluklar olup olmadığı konusunda sizden bilgi almak ister. Bu konuyu daha ayrıntılı olarak görüşmek için View Transitions WICG GitHub deposu (Transitions WICG GitHub deposu) deposuna yorum ekleyebilirsiniz.
Gördüğümüz yenilikçi demolar ve uygulamalardan ilham aldık ve daha fazlasını görmek istiyoruz. View Transitions ile yaptığınız çalışmalar web'in geleceğini şekillendiriyor. Astro'da Görünüm Geçişlerini deneyin, çalışmalarınızı paylaşın ve bu yolculuğa birlikte devam edelim.