如何实现 flexbox 中长度变化的过渡动画？
在 flexbox 布局中，flex-grow 属性允许元素根据可用空间动态扩展其长度。然而，默认情况下，这种长度变化是立即发生的，不会产生过渡效果。
为了在此类变化中添加过渡，可以应用 css 过渡规则。让我们通过一个示例来了解如何实现：
.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 元素作为 flexbox 容器，其中包含两个子元素 .a 和 .b。.a 使用 flex-grow: 1，使其占据剩余空间。.b 的 flex-basis 设置为 70%，即它在初始状态下的最小长度。
当鼠标悬停在 .a 上时，它会触发 :hover 伪类，并导致 .b 的 flex-basis 更改为 0。这将使 .b 收缩并释放其之前占据的空间，同时 .a 也会相应地扩展。
为了实现动画效果，我们在 .b 上应用了 css 过渡。transition: all 1s ease-in 规则指定长度变化将使用 1 秒的 ease-in 过渡效果。这使 .b 能够平滑地从 70% 过渡到 0，从而在长度变化中产生流畅的动画。
