赋予 flex-grow 缩放效果
如何使 flex-grow 产生的长度变化顺滑过渡？
代码示例中，元素 a 和 b 使用 flexbox 进行布局。当悬停在元素 a 上时，元素 b 的长度将从 70% 变化为 0%。但这一变化缺省没有任何过渡动画。
解决方案：
要为长度的变化添加过渡动画，可以为元素 b 添加一个 css 过渡属性。以下 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;
}在该 css 中，为元素 b 添加了 transition 属性，其值为 all 1s ease-in。这表示元素 b 的所有属性的变化都将在 1 秒内以 ease-in 缓动方式进行过渡。这样，当悬停在元素 a 上时，元素 b 的长度变化就具有了平滑的过渡效果。
