如何不使用显式宽度实现Implicit width过渡效果？

Implicit width（通过给文本元素添加内边距，让父容器获得特定但隐式的宽度）确实是个很实用的设计思路，但这种动态宽度的元素想要做平滑过渡确实有点棘手。这里分享几个不需要显式宽度就能实现类似过渡效果的方案：

方案1：利用transform: scaleX()实现快速过渡（注意变形问题） #

这个方案依赖CSS transform的过渡特性，不需要计算或设置任何固定宽度：

<div id='has-implicit-width'>
  <div class='text-element'>Some Text That Always Varies in Length</div>
</div>

#has-implicit-width {
  display: inline-block; /* 让父容器自适应子元素宽度 */
  overflow: hidden;
}

.text-element {
  padding: 12px;
  transform: scaleX(0);
  transform-origin: left center; /* 从左侧开始展开 */
  transition: transform 0.3s ease;
  display: inline-block;
}

#has-implicit-width:hover .text-element {
  transform: scaleX(1);
}

注意：scaleX会让元素在过渡过程中产生轻微的拉伸变形，如果对视觉精度要求极高，建议选择下面的方案。

方案2：用max-width + width:auto实现无变形过渡 #

通过设置初始宽度为0，配合足够大的max-width，利用width:auto的自适应特性实现过渡：

#has-implicit-width {
  display: inline-block;
}

.text-element {
  padding: 12px;
  width: 0;
  max-width: 1000px; /* 设置一个比最长文本更宽的值即可 */
  overflow: hidden;
  white-space: nowrap; /* 防止文本换行 */
  transition: width 0.3s ease;
  display: inline-block;
}

#has-implicit-width:hover .text-element {
  width: auto;
}

这个方案的优势是过渡过程中文本不会变形，兼容性也很好，唯一需要注意的是max-width的值要足够覆盖所有可能的文本长度。

方案3：CSS Grid的fr单位过渡技巧 #

利用CSS Grid的grid-template-columns属性支持过渡的特性，用0fr和1fr来控制元素的展开与收起：

<div id='has-implicit-width'>
  <div class='text-element'>Some Text That Always Varies in Length</div>
</div>

#has-implicit-width {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.3s ease;
}

.text-element {
  padding: 12px;
  overflow: hidden;
}

#has-implicit-width:hover {
  grid-template-columns: 1fr;
}

这个方案同样不需要显式宽度，过渡过程无变形，现代浏览器都支持，代码也很简洁。

内容的提问来源于stack exchange，提问作者oldboy