relative width not working while animating div collapse using MUI's transition API
I have an input bar that can collapse and expand on
I am using MUI's transition API . If I set
onClick
but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely.
I am using MUI's transition API . If I set
width: '200px'
on the <TextFied sx={{ width: '200px' }} />
it works, however, setting relative width doesn't work i.e. <TextField sx={{ width: '80%' }} />
2 Replies
I’m not familiar with the MUI api, is there a timing function on your transition like ease-in?
I think it is because it's not possible to transition between width: 0 and width: auto. (a percentage doesnt do anything on an inline element)
I don't know mui, but i think the only way is to set a fixed width. (or maybe try setting a max-width which is larger than expected)