html - 父宽度更改时过渡子宽度 100%

Question

我想出一种方法让 child 具有可转换的宽度，同时让父级立即更改，我遇到了问题。

使用以下示例:

.parent {
  height: 100px;
  width: 25%;
  background-color: blue;
}

.child {
  width: 100%;
  transition: width 1s;
  background-color: red;
  height: 50px;
}

.parent:hover {
  width: 50%;
}

<div class="parent">
  <div class="child">
  </div>
</div>

当 .parent悬停时，它的宽度应该增加，然后 child 应该花1s才能 catch parent 的宽度。

有没有办法实现这一目标？我不希望父级过渡，因为随着父级的增长，它会导致大量跳跃，而不是一次移动所有东西。

Answer 1

您不能使用 transition ，因为 child 的width 值 实际上并没有改变 - 它是 100%之前和100%后。

在这种情况下，您可以使用从 50% 开始的动画。如果新width ，然后转到 100% .如果悬停结束，则子 width将立即回到父级的宽度。

.parent {
  height: 100px;
  width: 25%;
  background-color: blue;
}

.child {
  width: 100%;
  background-color: red;
  height: 50px;
}

.parent:hover {
  width: 50%;
}

.parent:hover .child {
  animation: 1s both grow;
}

@keyframes grow {
  from { width: 50%; }
  to { width: 100%; }
}

<div class="parent">
  <div class="child">
  </div>
</div>