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. Ekstra Konular
33. Dökümantasyon https://developer.chrome.com/docs/web-platform/view-transitions
34. 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
35. Debug ve Test Chrome DevTools “Animations” Paneli
36. DevTools - MoreTools - Animations
37. DevTools - MoreTools - Animations
39. Tekrarlı elementlerin yönetimi
40. Çözüm:view-transition-class
41. Promise
42. Farklı Javascript Frameworklerinde Çalışmak
47. Teşekkürler İletişim Demo