Question

请运行我的代码示例，并将鼠标悬停在黑色正方形上方，为什么内部div，白色边框div会振荡/抖动？我该如何停止这样做？

body {
  min-height: 100vh;
  display: flex;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.transition-container {
  background: black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  transition-duration: 1.25s;
  transition-property: margin, width, height;
}

.transition-container:hover {
  margin: 0;
  width: 120px;
  height: 120px;
}

.inner-container {
  border: 4px solid white;
  width: 60px;
  height: 60px;
}

<div class="main-container">
  <div class="transition-container">
    <div class="inner-container">
    </div>
  </div>
</div>

目标

在我的外部div（<div class="transition-container">）上悬停时，我希望它增长，并且我想使用过渡使其使其平滑
我不希望成长中的div占用更多空间。目前，为了实现这一目标，我缩小了利润率

Answer 1

添加transition-timing-function: steps(10, end);修复了我的设计示例。 Source。

body {
  min-height: 100vh;
  display: flex;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.transition-container {
  background: black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  transition-duration: 1.25s;
  transition-property: margin, width, height;
  transition-timing-function: steps(10, end);
}

.transition-container:hover {
  margin: 0;
  width: 120px;
  height: 120px;
}

.inner-container {
  border: 4px solid white;
  width: 60px;
  height: 60px;
}

<div class="main-container">
  <div class="transition-container">
    <div class="inner-container">
    </div>
  </div>
</div>

Answer 2

将4px上的边框宽度从4.5px更改为<div class="inner-container">可以解决此问题。将其更改为任何小数似乎可以解决。例如，如果我也使用5.5px或3.5px进行了修复。我不明白为什么‍♂️，想知道为什么！

我不得不在我们的应用程序中使用此修复程序，因为transition-time-function修复程序在我们更复杂的布局中不起作用。

body {
  min-height: 100vh;
  display: flex;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.transition-container {
  background: black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  transition-duration: 1.25s;
  transition-property: margin, width, height;
}

.transition-container:hover {
  margin: 0;
  width: 120px;
  height: 120px;
}

.inner-container {
  border: 4.5px solid white;
  width: 60px;
  height: 60px;
}

<div class="main-container">
  <div class="transition-container">
    <div class="inner-container">
    </div>
  </div>
</div>

在父div上使用CSS过渡时，内部div会振荡

2 个答案: