使用动画将元素大小调整为内容

Question

我有一个<button>元素，文本会发生变化。我希望大小能够将按钮大小流畅地调整为新内容。

我尝试使用以下但没有运气

transition: width 1000ms linear;

我怎样才能做到这一点？

Answer 1

通过调整元素的内容不会触发转换。它只能通过可转换的css属性改变来启动。我知道，会很好，但不是。我也不会想到宽度＆＃39;是一个可转换的属性，但是＆＃39; max-width＆＃39;是

您可以在调整其内容之前获取元素的现有宽度（Element.clientWidth），然后设置一个“最大宽度”＆＃39;或者＆＃39; min-width＆＃39; （在取决于是否需要扩展或收缩）基于此值插入新内容之前。然后再次将值调整为适合新内容的值。