CSS 当最初将宽度设置为适合内容时，宽度过渡不起作用

Question

我想这与 width: fit-content 属性不是数字有关，但我不知道如何在不使用固定宽度的情况下修复它。如下所示，将鼠标悬停在上方时，div 不会平滑展开。相反，它们会立即扩展到 100%。

* {
  font-family: sans-serif;
}

div:not(#container) {
  width: fit-content;
  background-color: green;
  color: white;
  margin-top: 1em;
  padding: 1em;
  transition-property: width;
  transition-duration: 1s;
}

#ease {
  transition-timing-function: ease;
}

#linear {
  transition-timing-function: linear;
}

#ease-in {
  transition-timing-function: ease-in;
}

#ease-out {
  transition-timing-function: ease-out;
}

#in-out {
  transition-timing-function: ease-in-out;
}

#container:hover div {
  width: 90%;
}

<html>
  <head>
    <title>CSS animations</title>
  </head>
  <body>
    <div id="container">
      <div id="linear">
        <p>
          Linear
        </p>
      </div>
      <div id="ease">
        <p>
          Ease
        </p>
      </div>
      <div id="ease-in">
        <p>
          In
        </p>
      </div>
      <div id="ease-out">
        <p>
          Out
        </p>
      </div>
      <div id="in-out">
        <p>
          In-out
        </p>
      </div>
    </div>
  </body>
</html>

Answer 1

你的 assumption/expectation 关于 width: fit-content 对我来说似乎是合理的。在有人能更好地解释之前，您可以将 width: fit-content 与 min-width: 0 一起使用，然后对 min-width 进行动画处理。这并不完美，因为动画从 0 开始（您可能会注意到轻微的延迟）

* {
  font-family: sans-serif;
}

div:not(#container) {
  width: fit-content;
  min-width: 0;
  background-color: green;
  color: white;
  margin-top: 1em;
  padding: 1em;
  transition-property: min-width;
  transition-duration: 1s;
}

#ease {
  transition-timing-function: ease;
}

#linear {
  transition-timing-function: linear;
}

#ease-in {
  transition-timing-function: ease-in;
}

#ease-out {
  transition-timing-function: ease-out;
}

#in-out {
  transition-timing-function: ease-in-out;
}

#container:hover div {
  min-width: 90%;
}

<html>
  <head>
    <title>CSS animations</title>
  </head>
  <body>
    <div id="container">
      <div id="linear">
        <p>
          Linear
        </p>
      </div>
      <div id="ease">
        <p>
          Ease
        </p>
      </div>
      <div id="ease-in">
        <p>
          In
        </p>
      </div>
      <div id="ease-out">
        <p>
          Out
        </p>
      </div>
      <div id="in-out">
        <p>
          In-out
        </p>
      </div>
    </div>
  </body>
</html>

CSS 当最初将宽度设置为适合内容时，宽度过渡不起作用

CSS width transition not working when originally setting width to fit-content

html

css

transition