如何在使用动画时调整 Angular 中组件的宽度？

Question

我正在尝试使用 Angular 动画来滑动我的导航栏，它运行良好，但我需要在导航栏隐藏时自动调整其他组件的宽度。就像我希望我的其他组件在隐藏导航栏时占用整个页面的宽度一样，但由于某些原因，我的其他组件的宽度仅在我单击任何组件后才会调整。谁能帮我指导一下如何调整宽度？

我正在使用 ngIf 来显示和隐藏导航栏组件。当我在没有动画的情况下显示和隐藏导航栏时，宽度会自动调整。任何线索都会有所帮助。谢谢！

navmenu.component.ts

@Component({
  selector: 'nav-menu',
  templateUrl: './navmenu.component.html',
  styleUrls: ['./navmenu.component.css'],

  animations: [
    trigger(
         'inOutAnimation',
         [
           transition(
             ':enter',
             [
               animate('1s ease-out',
                       style({ width: 300, opacity: 1 }))
             ]
           ),
           transition(
             ':leave',
             [
               animate('1s ease-in',
                       style({ width: 0, opacity: 0 }))
             ]
           )
         ]
       )
]

Answer 1

对 stackblitz 做了一个粗略的模拟：https://stackblitz.com/edit/angular-nn2yzn

包含导航和其他元素的元素需要 display: flex，如果其他元素具有 flex: 1，它将占用任何可用的 space。所以如果 nav 的宽度缩小，其他元素会变大

如何在使用动画时调整 Angular 中组件的宽度？

How to adjust width of components in Angular while using Animations?

css

angular

typescript

angular-animations

angular-transitions