css transition与flex-shrink收缩动画效果
flex-shrink不支持transition动画，因其为布局计算属性，不触发可动画的中间帧；可通过max-width、width或flex-basis等可动画属性模拟平滑收缩效果。
在使用 CSS 的 flex 布局时，flex-shrink 控制子元素在容器空间不足时的收缩行为。默认情况下，flex-shrink: 1 表示可以按比例缩小。但如果你希望这个收缩过程有平滑的动画效果，仅靠 transition 并不能直接实现理想效果，因为 flex-shrink 本身不支持过渡动画。
flex-shrink 为什么不支持 transition 动画？
flex-shrink 是一个布局计算属性，浏览器在渲染 flex 容器时会根据子项的 flex-basis、width 和 flex-shrink 等值进行一次性计算，并不会触发可动画化的属性变化。
即使你写了：
.item { flex-shrink: 1; transition: flex-shrink 0.3s ease; }当容器尺寸变化时，flex-shrink 的“作用结果”（即宽度变化）是立即发生的，没有中间过渡帧。
如何实现类似 flex-shrink 的平滑收缩动画？
虽然 flex-shrink 不能直接动画化，但你可以通过控制可动画的属性来模拟类似效果。以下是几种实用方法：
-
使用 max-width 或 width 配合 transition：
将 flex 项的宽度设为可变，并用max-width控制最大宽度，再添加transition实现动画。 -
结合 flex-grow 和固定基础宽度：
设置flex-basis，让项目基于此伸缩，然后通过改变flex-grow或外部容器尺寸触发可动画的重排。 -
监听容器尺寸变化并动态设置 width：
使用 JavaScript 监听父容器变化，手动更新子项宽度并应用 CSS 过渡。
示例：用 max-width + transition 模拟收缩动画
以下是一个实用例子：
.container {display: flex;
width: 100%;
}
.item {
flex-shrink: 1;
max-width: 300px;
width: 100%;
height: 50px;
background: #007acc;
margin: 5px;
transition: max-width 0.3s ease;
}
.item:hover {
max-width: 100px;
}
当你 hover 时，max-width 变化会触发布局重算，同时由于 transition 存在，宽度会平滑缩小。这虽然不是真正的 flex-shrink 动画，但视觉上达到了类似效
果。
更高级方案：JavaScript 驱动的弹性动画
若需精确控制多个项目的动态收缩，可以用 JS 获取容器宽度变化，然后给每个子项设置带 transition 的 width 或 flex-basis：
const items = document.querySelectorAll('.flex-item');
window.addEventListener('resize', () => {
items.forEach(item => {
item.style.transition = 'width 0.3s';
item.style.width = `${calculatedWidth}px`;
});
});
这样可以在尺寸变化时主动触发可动画属性，弥补 CSS 的局限。
基本上就这些。虽然 flex-shrink 本身无法直接做 transition 动画，但通过控制 width、max-width 或 flex-basis 这些可动画属性，完全可以实现视觉上自然的收缩效果。关键在于理解 Flexbox 的布局机制和哪些属性真正支持过渡。
