Bram.us

フィード

記事のアイキャッチ画像
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.
7日前
記事のアイキャッチ画像
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
10日前
記事のアイキャッチ画像
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>.
16日前
記事のアイキャッチ画像
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!
20日前
記事のアイキャッチ画像
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ヶ月前
記事のアイキャッチ画像
The Future of CSS: Construct <​custom-ident> and <​dashed-ident> values with ident()
Bram.us
Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.
2ヶ月前