是否可以从宽度的数值平滑过渡到非数值 and/or 反之亦然？

Question

我的意图是在某些文本下方居中放置一个圆形彩色项目符号，或者下划线与文本一样长，具体取决于视口的大小； 两个状态之间应该会出现平滑过渡。

但是，似乎无法从 width 的数字值转换为非数字值，反之亦然。

出于演示目的，在下面的示例中，我没有使用媒体查询从一种状态更改为另一种状态，而是使用了复选框。

在下面的代码片段中，您可以看到 width 从 auto 到 1em 的转换不起作用（值随着复选框状态的改变而突然改变）。

input + div {
  margin-bottom: 0.4em;
  display: inline-block;
  margin: auto;
}

input + div::after {
  display: block;
  content: "";
  height: 0.5em;
  background-color: blue;
  transition-property: all;
  transition-duration: 2s;
  margin: auto;
  width: auto;
}

input:checked + div::after {
  height: 1em;
  width: 1em;
  border-radius: 100%;
  margin: auto;
}

<input type="checkbox">
<div>some very long word</div>

另一方面，将 width: auto 更改为 width: 5em; 会使过渡变得平滑。

input + div {
  margin-bottom: 0.4em;
  display: inline-block;
  margin: auto;
}

input + div::after {
  display: block;
  content: "";
  height: 0.5em;
  background-color: blue;
  transition-property: all;
  transition-duration: 2s;
  margin: auto;
  width: 5em;
}

input:checked + div::after {
  height: 1em;
  width: 1em;
  border-radius: 100%;
  margin: auto;
}

<input type="checkbox">
<div>some very long word</div>

我的问题是：在上述场景中是否有可能以某种方式实现平稳的 width 过渡？如果不是，为什么？什么变通办法是可取的？

Answer 1

不，转换仅适用于从 specific 数值到另一个

但有一些技巧可以战胜它

首先也是最好的是使用 min-width 和 max-width 而不是宽度

秒使用 transform:scale

这里是 min-width

的例子

input + div {
  margin-bottom: 0.4em;
  display: inline-block;
  margin: auto;
}

input + div::after {
  display: block;
  content: "";
  height: 0.5em;
  background-color: blue;
  transition-property: all;
  transition-duration: 2s;
  margin: auto;
  max-width: 10rem;
}

input:checked + div::after {
  height: 1em;
  max-width: 1em;
  border-radius: 100%;
  margin: auto;
}

<input type="checkbox">
<div>some very long word</div>

是否可以从宽度的数值平滑过渡到非数值 and/or 反之亦然？

Is it possible to make a smooth transition from a numeric value of width to a non-numeric value and/or viceversa?

css

css-transitions