Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Wanna see a 90-second speed run of on-page View Transitions?

145,876 görüntüleme • 2 yıl önce •via X (Twitter)

10 Yorum

Chris Coyier profil fotoğrafı
Chris Coyier2 yıl önce

1) I didn't do a fallback there. You should probably test that `document.startViewTransitions` exists first and do the DOM changes regardless. 2) Gosh @CodePen sure is nice for learning and playing isn't it? I'm glad I have thousands of Pens over a decade for reference.

Chris Coyier profil fotoğrafı
Chris Coyier2 yıl önce

3) Also do less if window.matchMedia('(prefers-reduced-motion: reduce)') is true.

James Kerr profil fotoğrafı
James Kerr2 yıl önce

View Transitions are a complete game changer. We can soon probably go back to mostly server rendered html with minimal JS and still get crazy interactive apps.

Mark Jaquith profil fotoğrafı
Mark Jaquith2 yıl önce

Where is “whatever” defined? Did you just give it a nonsense name, and somehow that enables the size animation?

Chris Coyier profil fotoğrafı
Chris Coyier2 yıl önce

Just needs any *unique* name at all. Having a name means "hold onto this element and try to tween it" (otherwise you get the cross-fade). If there are two elements with the same name, it just aborts.

Joe di Stefano profil fotoğrafı
Joe di Stefano2 yıl önce

Can you control the easing / timing? What is the benefit over using transition:

Chris Coyier profil fotoğrafı
Chris Coyier2 yıl önce

Yep there is optional CSS control over all of it.

Matt profil fotoğrafı
Matt2 yıl önce

Can’t wait for them to have cross browser compatibility 😍

Bowie profil fotoğrafı
Bowie2 yıl önce

MAYBE IF TWITTER VIDEO WASNT SO GARBAGE

Cédric Nirousset - @Nyro@mastodon.social profil fotoğrafı
Cédric Nirousset - @[email protected]2 yıl önce

In this simple use case, what is different from using a css transform? Are performance the same?

Benzer Videolar

Wanna see the back view? 👀
0:21

Sensitive content

Wanna see the back view? 👀

Saki💋

162,186 görüntüleme • 2 yıl önce