Angular中如何实现选中div从当前位置平滑扩展铺满的过渡效果

DevOps 小满

2026-10-6

实现方案方向指引

以下是3个可落地的实现思路，你可以根据现有项目的技术栈复杂度选择：

元素坐标快照方案
选中配置文件卡片的瞬间，先通过getBoundingClientRect()接口获取该卡片当前在视口内的绝对坐标（left、top、width属性），给当前选中卡片临时设置position: fixed/absolute定位，将坐标初始值设为刚才拿到的数值，同时给其余未选中卡片添加透明度过渡后隐藏。随后给选中卡片的left、width属性添加过渡动画，将left设为0、width设为父容器100%宽度，动画结束后再将卡片改回正常文档流布局，避免后续内容排版异常。
FLIP动画方案
直接采用专门应对元素位置、尺寸突变场景的FLIP动画逻辑：
1. First：记录选中卡片初始的位置、尺寸状态
2. Last：直接修改DOM到最终状态（隐藏其余卡片、当前卡片宽度100%）
3. Invert：计算初始和最终状态的坐标、尺寸差值，用transform属性把当前卡片先偏移回初始位置
4. Play：给transform添加过渡动画，重置为transform: none，卡片就会自然从原位置平滑过渡到最终的满宽状态
  Angular官方的@angular/animations模块也支持FLIP动画封装，无需额外引入过重的第三方库。
Flex布局原生过渡方案
你之前使用Flex布局出现跳变问题，是因为未选中卡片直接消失导致布局突变。可以调整时序：先给所有卡片的flex-grow、width、opacity属性都添加统一过渡，选中时先把其余未选中卡片的flex-grow设为0、width设为0、opacity设为0，同时把选中卡片的flex-grow设为1，等待过渡结束后再真正移除/隐藏其余空白卡片即可，整个过程选中卡片会随着其余卡片的收缩自然向两侧延展，不会出现从左侧跳变的问题。