正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Yoooo CSS view transitions are incredible! This is like 100 lines. Wild. 🤯

Devon Govett

41,794 subscribers

120,824 次观看 • 1 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

11 条评论

Devon Govett 的头像

Devon Govett1 年前

And yes, Toast is finally coming to React Aria Components soon! 😊

Devon Govett 的头像

Devon Govett1 年前

In the meantime, plz check out our latest release. We worked hard on it. 😄

SecurityPal 的头像

SecurityPal2 年前

“When something breaks, be transparent, own it, fix it. And it's really about how you respond to it.” @WilHarm3 (@craft_ventures) emphasizes the importance of transparency and responsiveness when things go wrong. Watch the episode here:

Jarrod Payne 的头像

Jarrod Payne1 年前

Mind sharing the code?! Looks really nice.

NullVoxPopuli 的头像

NullVoxPopuli1 年前

Code or it didn't happen

phatg 的头像

phatg1 年前

wow, could you share the codesandbox link?

Wilson Hou 的头像

Wilson Hou1 年前

woahhhhh....... still not interruptible though right?

Alex Vechy 的头像

Alex Vechy1 年前

it only takes some time to actually understand what's going on with view transitions

Phil Wolstenholme @wolstenhol.me 的头像

Phil Wolstenholme @wolstenhol.me1 年前

Oooh are you playing around with the experimental React helper for them, or managing all the view-transition-names etc yourself for this demo?

Devon Govett 的头像

Devon Govett1 年前

Just native APIs here

Artur Bień 的头像

Artur Bień1 年前

Damn

相关视频

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM

Wes Bos

149,041 次观看 • 1 年前

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Devon Govett

98,021 次观看 • 2 年前

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

Chrome for Developers

114,560 次观看 • 8 个月前

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

80,298 次观看 • 2 年前

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

jhey ʕ•ᴥ•ʔ

142,262 次观看 • 2 年前

View Transitions with CSS linear() to create a light flicker effect 💡

View Transitions with CSS linear() to create a light flicker effect 💡

jhey ʕ•ᴥ•ʔ

271,221 次观看 • 2 年前

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

jhey ʕ•ᴥ•ʔ

13,147 次观看 • 1 个月前

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,645 次观看 • 3 年前

Crea animaciones entre páginas con 5 líneas de código. Te presento las View Transitions de CSS:

Crea animaciones entre páginas con 5 líneas de código. Te presento las View Transitions de CSS:

Miguel Ángel Durán

33,924 次观看 • 1 年前

This is wild. Udio just dropped and it's like Sora for music. The music are insane quality, 100% AI. 🤯 1. "Dune the Broadway Musical"

This is wild. Udio just dropped and it's like Sora for music. The music are insane quality, 100% AI. 🤯 1. "Dune the Broadway Musical"

Min Choi

1,942,643 次观看 • 2 年前

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Addy Osmani

79,789 次观看 • 2 年前

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

Adam Argyle

128,376 次观看 • 2 年前

100 transitions by Maryna Molchanova 🤯

100 transitions by Maryna Molchanova 🤯

Interesting As Fuck

26,533 次观看 • 1 年前

CSS transitions made this feel 10x better. no jank. just smooth. Luke

CSS transitions made this feel 10x better. no jank. just smooth. Luke

Ali Grids

48,793 次观看 • 3 个月前

dark side of the theme △🌈 – one set of CSS @keyframes – scoped properties – perspective() for 3D transform – document.startViewTransition(switchTheme) view transitions are the gift that keeps on giving 🎁

dark side of the theme △🌈 – one set of CSS @keyframes – scoped properties – perspective() for 3D transform – document.startViewTransition(switchTheme) view transitions are the gift that keeps on giving 🎁

jhey ʕ•ᴥ•ʔ

55,268 次观看 • 1 年前

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

jhey ʕ•ᴥ•ʔ

79,964 次观看 • 1 年前

AI video generation is officially getting out of hand. The transitions in this are absolutely insane 🤯🔥

AI video generation is officially getting out of hand. The transitions in this are absolutely insane 🤯🔥

sosa

685,548 次观看 • 1 个月前

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,045 次观看 • 7 个月前