argyleink / argyleink/open-props

Animate details in normalize.css

Open
#532 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
5.5k
Forks
216
PR merge metrics
No merged PRs in 30d

Description

https://developer.chrome.com/docs/css-ui/animate-to-height-auto/

also add animated details
```css
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}

details {
transition: height 0.5s ease;
height: 2.5rem;

&[open] {
height: auto;
overflow: clip; /* Clip off contents while animating */
}
}
}
```

_Originally posted by @argyleink in https://github.com/argyleink/open-props/issues/512#issuecomment-2361864293_

Contributor guide

No contributing guide indexed for this repository

Research direction

Inspect normalize.css and compare the requested details animation with the linked Chrome guidance. Confirm how the supplied @supports block should fit the stylesheet, then verify that details elements animate when opened without affecting unsupported browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.