如何在 Flex 布局中为 flex-grow 属性触发的长度变化添加过渡动画？

为 flex 增长触发的长度变化添加平滑过渡

问题：

如何在 flex 布局中为因 flex-grow 属性而触发的长度变化添加过渡动画？

答案：

为了使 flex-grow 引起的长度变化平滑过渡，需要在元素上应用 transition 属性。

以下是实现该效果的代码示例：

.container {
  display: flex;
  height: 100px;
}

.A {
  flex-grow: 1;
  background-color: red;
}

.B {
  flex-basis: 70%;
  background-color: blue;
  transition: all 1s ease-in;
}

.A:hover + .B {
  flex-basis: 0;
}

在这个示例中：

• .container 元素是一个 flex 容器。
• .a 和 .b 元素是 flex 项。
• .a 具有 flex-grow 属性，允许它扩展以填充可用空间。
• .b 具有 flex-basis 属性，指定其初始大小。
• .b 还具有 transition 属性，它定义了长度变化的过渡效果。
• 当元素 .a 被悬停时，其 flex-basis 被设置为 0，导致 .b 扩展并填充可用空间。同时，.b 的长度变化平滑地过渡 1 秒。