如何使用Angular Animations处理屏幕大小调整？

Question

如何处理使用宽度等角度动画属性调整窗口大小？ 例如： 此代码将为元素的宽度设置动画，并且对于所有尺寸都不会从屏幕溢出或看起来太小。

桌面：

移动：

直到用户调整屏幕大小。在调整大小时，动画已完成，因此不会对窗口调整大小作出反应。

function setEndWidth() {
  if(MatchMediaService.bp('sm')){
    return '70vw';
  } else {
    return '30vw';
  }
}

function setStartWidth() {
  if(MatchMediaService.bp('sm')){
    return '0px';
  } else {
    return '20vw';
  }
}

@Component({
  moduleId: module.id,
  selector: 'menu-container',
  templateUrl: 'menu.html',
  styleUrls: ['./menu.scss'],
  animations: [
    trigger('goodmorning', [
      state('void', style({
        'width': '0',
        'transform': 'rotate(0)',
        'transform-origin': '0 0'
      })),
      state('harwood', style({
        'width': setEndWidth(),
        'transform': 'rotate(-30deg)',
        'transform-origin': '0 0'
      })),
      transition('void => *', animate(2000, keyframes([
        style({
          'width': '0',
          'transform': 'rotate(0)',
          'transform-origin': '0 0'
        }),
        style({
          'width': setStartWidth(),
          'transform': 'rotate(0)',
          'transform-origin': '0 0'
        }),
        style({
          'width': setEndWidth(),
          'transform': 'rotate(-30deg)',
          'transform-origin': '0 0'
        })
      ]))),
      transition('void => *', animate('2.5s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955)'))
    ])
  ]
})

HTML：

<line-thing [@goodmorning]="'harwood'"></line-thing>