mui / mui/base-ui

add attribute to indicate animating elements

Open
#5,433 0 comments 0 reactions 0 assignees View on GitHub
type: new feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.