0

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

我正在使用 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 }))
             ]
           )
         ]
       )
]
4

1 回答 1

0

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

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

于 2020-07-28T15:19:07.713 回答