Devfest Denizli - View Transitions API: Creating Smooth Transitions

View Transitions API: Creating Smooth Transitions

GDG Denizli - Devfest Denizli 25'
29.11.2025

Merkezefendi Kültür Merkezi - Denizli

Transcript

1. View Transitions API Creating Smooth Transitions #devfestdenizli
2. Mert Metin Senior Software Engineer Blogger, speaker
3. Gündem View Transitions Nedir? Kazanımları Same Document View Transitions Cross Document View Transitions Ek Konular
4. Keskin Görünüm https://github.com/mertmtn/view-transitions-api-demo/tree/master/none
5. View Transitions API, web uygulamalarında farklı görünümler arasında animasyonlu geçişler oluşturmayı sağlar.
6. Gelişmiş algılanan performans
7. İlgi çekici bir kullanıcı deneyimi
8. Temiz kod - Karmaşık CSS, Javascript kodlarından kurtulmak
9. Same-document view transitions a.k.a. SPA - Single Page Applications Geçişlerin aynı sayfa içerisinde çalışmasıdır.
10. https://github.com/mertmtn/view-transitions-api-demo/tree/master/spa
11. Tekil bir şekilde isimlendirin. Elementlere göre geçişler sağlar. “view-transition-name” css özelliği
14. Nasıl tetiklenir? document.startViewTransition
15. Mevcut CSS animasyonlarıyla geçişleri özelleştirin.
16. Çalışma Mantığı
18. current state Mevcut durum - Tarayıcı, mevcut durumun görüntüsünü alır.
19. new state snapshotted Callback fonksiyonu tarafından DOM güncellemelerinin yapılması
20. new state-snapshotted Güncellenen yeni durum Tarayıcı, yeni durumun da görüntüsünü alır.
21. pseudo-element-tree
22. swapping two states Animasyon desteği ile tarayıcı, eski ve yeni durum arasında geçişi tamamlar.
23. view-transition-old(root) view-transition-new(root) opacity:0 opacity:1 fades-out fades-in
24. https://codepen.io/bramus/full/xxQKvJP
25. a.k.a. MPA - Multiple Page Applications Cross-document view transitions İki farklı sayfa arasındaki geçişlerde çalışır.
26. https://github.com/mertmtn/view-transitions-api-demo/tree/master/mpa
27. İsteğe bağlıdır. Aktif edilmelidir.
28. Aktif edilmesi için CSS kodu
29. same-origin linklerde çalışır. https://xyz.com:443 scheme hostname port origin
30. same origin https://xyz.com/test https://xyz.com/about cross origin http://xyz.com/page.html https://xyz.com:81/about https://admin.xyz.com https://xyz.com/page.html Kaynak:
31. Bu özelliğin kullanılamayacağı durumlar; Sık kullanılanlar bölümünden sayfanın 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
32. 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östermeden
33. 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 hâle getirir
34. pageswap -pagereveal birlikte kullanımı 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
35. Ekstra Konular
36. Dökümantasyon https://developer.chrome.com/docs/web-platform/view-transitions
37. Tarayıcı Desteği Same-document view transitions Cross-document view transitions https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition#browser_compatibility
38. Debug ve Test Chrome DevTools “Animations” Paneli
39. DevTools - MoreTools - Animations
40. DevTools - MoreTools - Animations
42. Tekrarlı elementlerin yönetimi
43. Çözüm:view-transition-class
44. Promise
45. Farklı Javascript Frameworklerinde Çalışmak
50. Teşekkürler İletişim Demo