add attribute to indicate animating elements
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
It would be helpful to have some way to easily style elements based on if they are currently animating. For example, a `[data-animating]` attribute.
## Examples in other libraries
I'm not aware of any
## Motivation
We set overflow: hidden during animations so scrollbars don't get shown during the animation. This is causing problems for some components that display popovers using absolute positioning from inside the collapsible container. We would use this attribute to conditionally apply the "overflow: hidden" styles only during the animation.
Prompted by the conversation in #4915 . (sorry it took so long)
Contributor guide
Research direction
No files or tests are named. Start by tracing the collapsible animation behavior discussed in #4915 and determine where the animation state can be exposed; done means elements indicate when they are animating so overflow styling can be applied conditionally without disrupting popovers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100