Question

我遇到了一个问题，想办法让孩子立即改变父母的宽度，使孩子拥有可转换的宽度。

使用以下示例：

.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悬停时，其宽度应增加，然后孩子应该花1秒来赶上父母的宽度。

有什么办法可以做到这一点？我不希望父母过渡，因为随着父母的成长，这会导致很多跳跃，而不是一次移动所有东西。

Answer 1

您不能使用transition，因为孩子的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>

Answer 2

因此请记住，div个元素是block个元素。除非您另外设置样式，否则它们将填满其父级的整个宽度。

这使得使用百分比成为问题，而没有添加keyframes动画。尽管定义动画没有错。

但是，如果您使用其他类型的css单位指定确切的宽度，则可以通过在父级悬停时更改子级的宽度来实现效果。

下面，我将父级宽度更改为25vw并为子级分配了相同的宽度。然后，当父对象悬停时，将子对象的宽度更改为100%会使它过渡。

在原始情况下，您只更改了父母width，孩子的宽度从未改变，因为在父母的两种状态下，其值为100%。

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

.child {
  width: 25vw;
  transition: width 1s linear;
  background-color: red;
  height: 50px;
}

.parent:hover {
  width: 50%;
}
.parent:hover > .child {
  width: 100%;
}

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

Answer 3

问题在于您的孩子的身高在技术上没有变化。它仍然保持父级宽度的100％，因此，尽管物理尺寸受父级更改的限制，但其相对宽度值仍为100％，因此未应用过渡

使用vw单位将允许您创建一个流体布局，其宽度值相对于视口（窗口）宽度而不是包含的div。

.parent { height: 100px; width: 25vw; background-color: blue; } .child { width: 25vw; transition: width 1s; background-color: red; height: 50px; } .parent:hover, .parent:hover .child { width: 50vw; }

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

父级宽度发生变化时，过渡子级宽度为100％

3 个答案: