Bram.us

フィード

記事のアイキャッチ画像
View Transitions Applied: More performant ::view-transition-group(*) animations
Bram.us
If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot, you can optimize its keyframes so that the pseudo-element animates on the compositor.
6時間前
記事のアイキャッチ画像
View Transitions Snippets: Keeping the page interactive while a View Transition is running
はてなブックマークアイコン 1
Bram.us
The ::view-transition root overlay captures all clicks … but you can undo that.
9日前
記事のアイキャッチ画像
MPA View Transitions Deep Dive
Bram.us
Back in December I joined Kevin J Powell on his channel to talk about Cross-Document View Transitions
12日前
記事のアイキャッチ画像
CSS attr() gets an upgrade
Bram.us
You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than <string>.
18日前
記事のアイキャッチ画像
Move elements around the DOM while preserving their state with moveBefore
Bram.us
Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
23日前
記事のアイキャッチ画像
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
Bram.us
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
1ヶ月前
記事のアイキャッチ画像
View Transitions Snippets: Getting all Animations linked to a View Transition
Bram.us
A few lines of JavaScript to get all animations linked to an active View Transition.
1ヶ月前
記事のアイキャッチ画像
Experiment: Automatically trigger a View Transition when a JavaScript Property of an Element changes
Bram.us
Tricking a MutationObserver into observing changes to IDL attributes by syncing the IDL attributes to their Content Attribute counterparts.
1ヶ月前
記事のアイキャッチ画像
Misconceptions about View Transitions
Bram.us
Post I wrote a while ago for Chrome for Developers, about some misconceptions about View Transitions that are making rounds.
1ヶ月前
記事のアイキャッチ画像
Animatable Accordions (2024.11.27 @ devs.gent)
Bram.us
Talk on animating the <details> element with transition-behavior: allow-discrete , interpolate-size: allow-keywords, and ::details-content.
1ヶ月前