#viewtransition — Public Fediverse posts

Анимируем элемент <dialog> с помощью view transitions. Рик Скеннинк применяет View Transitions API как прогрессивное улучшение: проверяет prefers-reduced-motion и поддержку startViewTransition, переносит view-transition-name с <button> и её текста на <dialog> и его заголовок внутри startViewTransition(), превращая кнопку в модальное окно. #css #viewtransition

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/

Анимируем элемент <dialog> с помощью view transitions. Рик Скеннинк применяет View Transitions API как прогрессивное улучшение: проверяет prefers-reduced-motion и поддержку startViewTransition, переносит view-transition-name с <button> и её текста на <dialog> и его заголовок внутри startViewTransition(), превращая кнопку в модальное окно. #css #viewtransition

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/

Animating the <dialog> element using view transitions. @rikschennink uses the View Transitions API as a progressive enhancement, behind a check for prefers-reduced-motion and startViewTransition support, moving view-transition-name from a button and its label onto the dialog and its title inside startViewTransition() to morph button into modal. #css #viewtransition

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/

Animating the <dialog> element using view transitions. @rikschennink uses the View Transitions API as a progressive enhancement, behind a check for prefers-reduced-motion and startViewTransition support, moving view-transition-name from a button and its label onto the dialog and its title inside startViewTransition() to morph button into modal. #css #viewtransition

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/

I wanted to play with view transition in CSS. What do you think?

https://mnt.io
Patch: https://github.com/Hywan/mnt.io/commit/1b123dd3270862f6d2a976c37d91ec45cd0a7711

#html #css #javascript #ViewTransition

I wanted to play with view transition in CSS. What do you think?

https://mnt.io
Patch: https://github.com/Hywan/mnt.io/commit/1b123dd3270862f6d2a976c37d91ec45cd0a7711

#html #css #javascript #ViewTransition

Introducing view-transitions-mock, a non-visual polyfill for same-document view transitions. @bramus built a spec-compliant JavaScript implementation of the View Transition API that works across all browsers. It handles document.startViewTransition(), the ViewTransition class with its promises, and view transition types. Animations are skipped in unsupported browsers, but DOM updates work as expected. #viewtransition #polyfill

https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/

Introducing view-transitions-mock, a non-visual polyfill for same-document view transitions. @bramus built a spec-compliant JavaScript implementation of the View Transition API that works across all browsers. It handles document.startViewTransition(), the ViewTransition class with its promises, and view transition types. Animations are skipped in unsupported browsers, but DOM updates work as expected. #viewtransition #polyfill

https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/

Представляем view-transitions-mock — невизуальный полифил для view transition в рамках документа. Брамус Ван Дамм создал JavaScript-реализацию View Transition API совместимую со спецификацией, которая работает во всех браузерах без кучи условий в коде. Она обрабатывает document.startViewTransition(), класс ViewTransition с промисами и типы View Transition. Обновления DOM идентичны нативным, но анимации пропускаются в старых браузерах. #viewtransition #polyfill

https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/

Представляем view-transitions-mock — невизуальный полифил для view transition в рамках документа. Брамус Ван Дамм создал JavaScript-реализацию View Transition API совместимую со спецификацией, которая работает во всех браузерах без кучи условий в коде. Она обрабатывает document.startViewTransition(), класс ViewTransition с промисами и типы View Transition. Обновления DOM идентичны нативным, но анимации пропускаются в старых браузерах. #viewtransition #polyfill

https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/

It looks like some basic view transition stuff is finally coming to #Firefox, this demo works in 144 dev edition (stable is now 143): https://mdn.github.io/dom-examples/view-transitions/spa/ or https://6440m.hatchboxapp.com/photos

#ViewTransition #Web

(but fuck DHH)

It looks like some basic view transition stuff is finally coming to #Firefox, this demo works in 144 dev edition (stable is now 143): https://mdn.github.io/dom-examples/view-transitions/spa/ or https://6440m.hatchboxapp.com/photos

#ViewTransition #Web

(but fuck DHH)

If you call `document.startViewTransition()` twice synchronously:

- Chrome: continues applying the first call's transition
- Safari: aborts the first call's transition and throws "AbortError: Old view transition aborted by new view transition."

Chrome's behavior would result in fewer aborted animations, which seems like a good thing. However, Safari's behavior seems like an intentional choice. Which is correct?

#googlechrome #safari #viewtransition #css

If you call `document.startViewTransition()` twice synchronously:

- Chrome: continues applying the first call's transition
- Safari: aborts the first call's transition and throws "AbortError: Old view transition aborted by new view transition."

Chrome's behavior would result in fewer aborted animations, which seems like a good thing. However, Safari's behavior seems like an intentional choice. Which is correct?

#googlechrome #safari #viewtransition #css

#Development #Releases
New in Chrome 126 · Cross-document View Transitions for websites are here! https://ilo.im/15z65i

_____
#Chrome #Browser #Website #ViewTransition #CloseWatcherAPI #WebDev #Frontend #CSS #JavaScript

#Development #Releases
New in Chrome 126 · Cross-document View Transitions for websites are here! https://ilo.im/15z65i

_____
#Chrome #Browser #Website #ViewTransition #CloseWatcherAPI #WebDev #Frontend #CSS #JavaScript

#Development #Introductions
What’s new in view transitions? · Get ready for a whole new level of transition animations! https://ilo.im/15ywh8

_____
#Animation #ViewTransition #Webpage #MPA #Browser #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Introductions
What’s new in view transitions? · Get ready for a whole new level of transition animations! https://ilo.im/15ywh8

_____
#Animation #ViewTransition #Webpage #MPA #Browser #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Releases
New in Chrome 124 · Better view transitions, new declarative shadow DOM APIs, and more https://ilo.im/15yl79

_____
#Browser #Chrome #ShadowDOM #WebSocket #ViewTransition #WebDev #WebAPI #Frontend #CSS #JavaScript

#Development #Releases
New in Chrome 124 · Better view transitions, new declarative shadow DOM APIs, and more https://ilo.im/15yl79

_____
#Browser #Chrome #ShadowDOM #WebSocket #ViewTransition #WebDev #WebAPI #Frontend #CSS #JavaScript

#Development #Techniques
Handling aspect ratio changes · How to fix CSS view transition animations that look flawed https://ilo.im/15y1me

_____
#Webpage #ViewTransition #Animation #WebDev #Frontend #CSS

#Development #Techniques
Handling aspect ratio changes · How to fix CSS view transition animations that look flawed https://ilo.im/15y1me

_____
#Webpage #ViewTransition #Animation #WebDev #Frontend #CSS

Pretty cool how simple it is to strap in #viewtransition with #HTMX without any fuzz and completely in the spirit of #progressiveenhancent ❤️

I’ll definitely strap this in and be ready for browser compatibility to get there 😊

https://khalidabuhakmeh.com/view-transitions-api-with-aspnet-core-and-htmx

Pretty cool how simple it is to strap in #viewtransition with #HTMX without any fuzz and completely in the spirit of #progressiveenhancent ❤️

I’ll definitely strap this in and be ready for browser compatibility to get there 😊

https://khalidabuhakmeh.com/view-transitions-api-with-aspnet-core-and-htmx

It's super rad that #htmx supports the #ViewTransitionAPI!

https://htmx.org/essays/view-transitions/

#webDev #viewTransition #CSS

It's super rad that #htmx supports the #ViewTransitionAPI!

https://htmx.org/essays/view-transitions/

#webDev #viewTransition #CSS

I want the thumbnails to open the full version in a modal, with next/prev arrows to navigate between multiple images attachments.

I'll probably use a <dialog> but I kinda wonder if there's a way for me to shoe horn a #viewTransition into this cause I want to play with the #ViewTransitions #API.

Maybe clicking the date can open an individual post, and I can use a #ViewTransitionAPI to navigate to that...

#webDev #mastodon #client #javaScript #CSS #HTML

I want the thumbnails to open the full version in a modal, with next/prev arrows to navigate between multiple images attachments.

I'll probably use a <dialog> but I kinda wonder if there's a way for me to shoe horn a #viewTransition into this cause I want to play with the #ViewTransitions #API.

Maybe clicking the date can open an individual post, and I can use a #ViewTransitionAPI to navigate to that...

#webDev #mastodon #client #javaScript #CSS #HTML

#Development #Techniques
Getting started with View Transitions on multi-page apps · “The ability to easily create quality 60 FPS page transitions is a game changer.” https://ilo.im/131ygn

_____
#Chrome #WebDevelopment #WebDev #Frontend #CSS #JavaScript #ViewTransition #ProgressiveEnhancement

#Development #Techniques
Getting started with View Transitions on multi-page apps · “The ability to easily create quality 60 FPS page transitions is a game changer.” https://ilo.im/131ygn

_____
#Chrome #WebDevelopment #WebDev #Frontend #CSS #JavaScript #ViewTransition #ProgressiveEnhancement

#viewtransition one the way to more native apps Example : https://chriscoyier.net/2023/01/16/intuitive-list-item-transitions-with-the-view-transitions-api/