Bugün, Chrome ve Astro'nun Görüntü Geçişleri API'si ile olan yolculuğu hakkında daha fazla bilgi paylaşmak istiyoruz. Astro topluluğunun API'yi erken benimsemesi ve denemesi de bu kapsamdadır. Bu sayede, daha geniş topluluğa sunulan olanaklar vurgulanmıştır. Ayrıca, Astro 3.0'taki görüntü geçişleri için yeni yerleşik destek hakkında daha fazla bilgi paylaşmaktan heyecan duyuyoruz.
Arka plan
Bir sayfanın farklı durumları arasında sorunsuz geçişler (durum geçişleri olarak bilinir), web'de sorunsuz ve animasyonlu deneyimler oluşturmanın her zaman karmaşık bir yönü olmuştur. CSS geçişleri, CSS animasyonları ve Web Animation API gibi araçların mevcut olmasına rağmen durum geçişleri oluşturmak göz korkutucu bir görev olmaya devam ediyordu. Zorluklardan biri, giden öğelerdeki etkileşimi ele almaktır. Bu durum geçişleri daha karmaşık hale getirebilir.
Ayrıca, yardımcı cihazlarda okuma konumunu ve odağını korumak zordur. Ayrıca, kaydırma konumu farklılıklarıyla uğraşmak durum geçişlerini zahmetli bir işlem haline getirir. Tüm bu faktörler, bir web sayfasındaki çeşitli öğeler arasında sorunsuz geçişler yapmanın karmaşıklığını artırır.
Görüntü Geçişleri API'si, tarayıcının bu zorluklara karşı çözümü olarak ortaya çıktı. Bu yeni API, iki durum arasında animasyonlu geçiş oluştururken DOM'u tek adımda değiştirmenin daha kolay bir yolunu sunar.
Chrome 111'de Görüntü Geçişleri API'sinin kullanıma sunulması, yalnızca JavaScript tabanlı web uygulamaları için değil, tüm web siteleri için geçiş desteği sunma konusunda daha geniş bir vizyonun başlangıcı oldu. Gelecekte daha da fazla iyileştirme yapacağız. Chrome, gelecekte dokümanlar arasında geçişler, derleyici tarafından yönlendirilen animasyonlar, kapsamlı geçişler ve iç içe yerleştirilmiş geçiş grupları gibi heyecan verici eklemeler üzerinde çalışabilir.
Demoyu ziyaret edin: Canlı, Kaynak
Görüntü geçişleri içeren ilk keşifler
Chrome'un Görüntü Geçişleri API'siyle olan yolculuğu tek başına değildi. Geliştiriciler, çerçeve yazarları ve CSS Çalışma Grubu'ndan gelen geri bildirimler ve ortak çalışmalar, özelliğin birkaç yıl boyunca şekillendirilmesinde önemli bir rol oynadı.
Geliştirici denemeleri, ilk aşamada kritik bir rol oynadı. API'nin ilk sürümleri CSS animasyonları desteklemiyordu ve geçişler birkaç kısıtlayıcı hazır ayarla sınırlıydı. İlk geri bildirimler, geliştiricilerin geçişlerin tamamen özelleştirilebilir ve etkileyici olmasını istediğini açıkça ortaya koydu. Bu karşılıklı işbirliği, API'nin iyi varsayılanlar, genişletilebilirlik ve özelleştirme dengesi gözetilerek tasarlanmasını sağladı.
Astro, görüntü geçişlerini erkenden kullanmaya başlayan çerçevelerden biriydi. Bu makalenin geri kalanı, Astro ekibinin bakış açısından ele alınmış olup görüntü geçişlerini bulup benimseme ve web geliştirme deneyiminin merkezine getirme deneyimlerini paylaşmaktadır.
Astro, görüntüleme geçişlerine neden yatırım yapıyor?
Astro, uzun zamandır görüntü geçişleri gibi bir özellik arıyordu. Astro, sayfa yükleme performansını artırmak için kullanıcı arayüzü bileşenlerinizi sunucu tarafından hafif HTML olarak oluşturan bir JavaScript web çerçevesidir. Astro, mümkün olduğunca fazla işi istemci cihazından uzaklaştırır. Astro web siteleri, diğer web çerçevelerinin JavaScript istemci tarafı yönlendirmesiyle tarayıcı gezinmesini ele geçirebileceği yerel tarayıcı sayfası gezinmesini kullanır.
Bu değiş tokuş, Astro ekibi için bir zorluk oluşturdu: Astro, istemci tarafı yönlendirmeyi benimsemeden sayfa geçişlerini nasıl canlandırabilir ve sayfalar arasında uygulama benzeri kullanıcı arayüzü sürekliliği sağlayabilir?
Geçişleri Görüntüle yanıtı verildi. Astro, Görünüm Geçişleri sayesinde, JavaScript ağırlıklı SPA web çerçevelerinin sunduğu aynı yönlendirme özelliklerini sunabilir ancak istemci tarafı yönlendirmenin performans ve karmaşıklık yükü olmadan bunu yapabilir. Diğer çerçeveler, görüntü geçişlerini isteğe bağlı bir uygulama ayrıntısı olarak ele alıyordu ancak Astro için bu çok daha büyük bir şeydi.
Astro ekibinin yanıtlaması gereken bir sonraki soru "nasıl?" idi. Ekip, Turbo, Swup ve Livewire gibi projelerden ilham aldı ve hatta Astro'da birkaç benzer yaklaşımın prototipini oluşturdu.
İlk denemelerden biri, her yeni HTML sayfasını mevcut HTML ile otomatik olarak karşılaştıran ve ardından JavaScript kullanarak her öğeyi tek seferde değiştirmeye çalışan tam sayfalık bir "akıllı geçiş" içeriyordu. Bu yöntem akıllıca olsa da hatalara 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ün işleri fazla karmaşıklaştırmadan da güçlü olduğunu gösterdi. Astro ekibi, ilk demoları gördükten sonra tarayıcı API'lerini mümkün olduğunca yakından eşleştirebilecek basit bir Astro API fikrine ikna oldu. Görüntü Geçişleri, Astro'nun içinde gizlenmiş görünmez bir uygulama ayrıntısı olarak görülmek yerine doğrudan geliştiriciye gösterilebilir. Astro'yu doğrudan web platformuyla uyumlu hale getirerek ön uçtaki genel karmaşıklığı azaltın.
---
// 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>
<!-- ... -->
Yapılması gerekenler basitti: Yeni Görüntü Geçişleri API'sini Astro'ya ekleyin ve mümkün olduğunca çok sayıda web sitesine ve tarayıcıya sunacak otomatik yedek çözümler sağlayın. Çoğu tarayıcı (Chrome hariç) henüz yerel görüntü geçişleri için tam destek sunmadığından yedek destek gereklidir.
Astro'da resmi destek sunmaya başlıyoruz
Astro, Astro 2.9'da deneysel Görünüm Geçişleri desteğini kullanıma sundu. Hemen olumlu yanıt aldık. Geliştiriciler, birçok farklı kullanım alanına ait inanılmaz demolar paylaşmaya başladı ve bazı durumlarda bunların tamamını üretime gönderdi.
Demoyu ziyaret edin: Canlı, Kaynak
Astro 3.0, desteği sonlandırır ve yeni Görüntü Geçişleri API'sinin herkes için işaretini kaldırır. Bu yeni API'leri denemek veya bir kerede kullanmak için hazırsınız.
<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 beklenmedik bir avantajı, yerel Görüntü Geçişleri API'sinin üzerine yeni özellikler oluşturmayı deneme olanağıdır. Örneğin, yeni Astro transition:persist yönergesi, herhangi bir öğenin tam sayfa gezinme boyunca kalıcı olmasını sağlar. Bu sayede, kalıcı ses ve video oynatıcıları gibi uzun ömürlü öğeler desteklenir. Bu, eskiden yalnızca ağır JavaScript SPA'larında mümkün olan bir şeydi.
<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üntü geçişlerini geliştirici için daha ergonomik hale getirebilir. Örneğin, ekip özel ileri/geri animasyonlar ve dinamik HTML animasyonları için destek ekledi. Bu özelliklerin her ikisini de yalnızca alt düzey API'lerle yapmak zordur ancak Astro'da bu işlemler neredeyse hiç çaba gerektirmez.
Bu özellikler şimdilik yalnızca Astro'da mevcut olsa da Astro ekibi, gelecekte olası tarayıcı geliştirmeleri için edindikleri deneyimleri spesifikasyon yazarlarına ve çalışma gruplarına geri beslemeyi umuyor. Örneğin, CSS'de animasyonların paylaşılmasını kolaylaştırmak için bir öneriyi yakından izleyerek.
Sırada ne var?
Web'deki görüntüleme geçişlerinin geleceği parlak. Astro, Nuxt ve HTMX, belirli düzeyde destek sunmaya başladı. Birçok diğer platform da bu konuda ilgisini belirtti.
Chrome Ekibi, Astro'nun yerleşik görüntü geçişleri desteğinden dolayı çok heyecanlı. Web geliştirme için büyük bir adım olan bu özellik, daha akıcı ve dinamik kullanıcı deneyimleri sunar. Geliştiriciler, Astro 3.0'taki Görüntü Geçişleri'ni incelemenizi öneririz. Yeni açılış sayfaları oluşturuyor veya mevcut siteleri yükseltiyor olsanız da bu geliştirmeler oyunun kurallarını değiştiriyor. Görüntüleme Geçişleri, SPA'lar ve MPA'lar ile mümkün olan arasındaki boşluğu doldurmaya yardımcı oldu. Chrome, SPA ve/veya MPA desteğinde başka boşluklar olup olmadığını öğrenmek için sizinle iletişime geçmekten memnuniyet duyar. Bu konuyu daha ayrıntılı olarak görüşmek için Görüntüleme Geçişleri WICG GitHub deposunda yorumda bulunabilirsiniz.
Gördüğümüz yenilikçi demolardan ve uygulamalardan ilham aldık ve daha fazlasını görmek için sabırsızlanıyoruz. Görünüm Geçişleri ile yaptığınız çalışmalar web'in geleceğini şekillendiriyor. Astro'da görüntü geçişlerini deneyin, çalışmalarınızı paylaşın ve bu yolculuğa birlikte devam edelim.