I have a <button> element where the text changes. I want the size to fluidly adjust the buttons size to the new content.
I tried using the following without any luck
transition: width 1000ms linear;
How can I achieve this?
A transition won't be triggered by adjusting the content of the element. It would only be kicked off by a transitionable css property changing. I know, would be nice, but no. Also I don't think 'width' is a transitionable property, but 'max-width' is.
You could get the existing width of the element (Element.clientWidth) before adjusting its contents, then set a 'max-width' or 'min-width' (depending on whether it will need to expand or contract) based on this value before inserting the new content. Then adjust the value again to something appropriate to the new content.