Angular Material自定义sidenav无指定宽度实现文字图标到仅图标过渡

解决方法 #

Angular 动画本身无法直接对 width: auto 属性生效，你可以通过 max-width 间接实现自适应宽度的过渡效果，不需要给两种状态指定固定宽度：

1. 修改动画定义 #

把你组件里的动画触发器调整为以下配置：

animations: [
  trigger('openClose', [
    state('open', style({
      maxWidth: '280px', // 设为比你侧边栏实际最大宽度更大的值即可
      overflow: 'hidden',
    })),
    state('closed', style({
      maxWidth: '64px', // 仅展示图标时的宽度，可根据你的图标尺寸调整
      overflow: 'hidden',
    })),
    transition('open <=> closed', [
      animate('0.3s ease-in-out') // 可以自行调整动画时长和缓动函数
    ]),
  ]),
]

2. 补充侧边栏基础样式 #

在你的组件CSS里给 mat-sidenav 加以下基础配置：

mat-sidenav {
  box-sizing: border-box;
  width: auto;
}

原理说明 #

• 收起状态的 max-width 仅需要匹配仅图标展示时的宽度即可，展开状态的 max-width 只要设置为大于你侧边栏可能出现的最大宽度，就不会影响内容自适应展示
• 动画实际是对 max-width 做过渡，视觉上就等效于侧边栏宽度的平滑切换，不会固定死你的侧边栏宽度

内容的提问来源于stack exchange，提问作者OJT