时间戳

首页 > 解决方案 > 最初将宽度设置为适合内容时，CSS宽度过渡不起作用

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

问题描述

我希望它与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>

标签： htmlcsstransition

解决方案

你的假设/期望对width: fit-content我来说似乎是合理的。在有人可以更好地解释之前，您可以使用width: fit-contentwith min-width: 0，然后使用 animate 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>

相关问题，关于height: fit-content

推荐阅读