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

【问题标题】：Adjust element size to content using animations使用动画将元素大小调整为内容
【发布时间】：2015-05-17 06:36:52
【问题描述】：

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

我尝试使用以下没有任何运气

transition: width 1000ms linear;

我怎样才能做到这一点？

【问题讨论】：

你试过用-o-transition: all 1000ms; -moz-transition: all 1000ms; -webkit-transition: all 1000ms; transition: all 1000ms
另外，请发布更多代码，以便我们更轻松地为您提供帮助
我确实尝试过，但在这样一个简单的问题上发布更多代码只会让它膨胀

【解决方案1】：

调整元素的内容不会触发过渡。它只会通过可转换的 css 属性更改来启动。我知道，会很好，但没有。另外我不认为'width'是一个可转换的属性，但'max-width'是。

您可以在调整其内容之前获取元素的现有宽度（Element.clientWidth），然后根据需要设置“最大宽度”或“最小宽度”（取决于它是否需要扩展或收缩）插入新内容之前的这个值。然后再次将该值调整为适合新内容的值。

【讨论】：