Christopher Kirk-Nielsen on Nostr: Free HTML Web-Component: <animated-details>. Like a regular <details> element, but, ...
Free HTML Web-Component: <animated-details>. Like a regular <details> element, but, like, animated! It uses that 0fr/1fr trick to animate the height, the only reason it's a web component is that I'd sometimes only get the transition once, or not at all? So JavaScript, of course. Progressively enhanced, of course. Respects user's motion preferences, of course.
↕️
https://codepen.io/chriskirknielsen/pen/yLwoxdr?
#webcomponent
Published at
2024-01-23 21:32:08Event JSON
{
"id": "bc4513a1b80a8529c55372a22bdff9ee58abeba5f62af314960bb8c3b004b76c",
"pubkey": "7c8f0fa3b62478c6cdac80699fbc6ae127337c888cc5c693e5083c76d2c075c7",
"created_at": 1706045528,
"kind": 1,
"tags": [
[
"t",
"webcomponent"
],
[
"proxy",
"https://mastodon.social/users/chriskirknielsen/statuses/111807399773765577",
"activitypub"
]
],
"content": "Free HTML Web-Component: \u003canimated-details\u003e. Like a regular \u003cdetails\u003e element, but, like, animated! It uses that 0fr/1fr trick to animate the height, the only reason it's a web component is that I'd sometimes only get the transition once, or not at all? So JavaScript, of course. Progressively enhanced, of course. Respects user's motion preferences, of course.\n\n↕️ https://codepen.io/chriskirknielsen/pen/yLwoxdr?\n\n#webcomponent",
"sig": "61f3fd531f71d027decfce865eb51e8a951311b40c68af57b04abb0e8847e3161a89780694888a334622e4af472b7e88a981cfc16060daecfd8617e89cc19cc7"
}
