在mat-sidenav组件的'closing'事件中更改状态时，角度动画不会触发？

Posted 2021-04-04

我想设置侧导航链接如何在侧面导航菜单中显示的动画。我希望他们从右边滑入。为了让状态发生变化，我会在侧导航系统上监听两个事件。当它开始打开时，我调用一个切换状态的回调，当侧导航开始关闭时也会发生同样的事情。我可以使用以下代码实现此目的：

component.ts：

`
@Component({...})
sideNavAnimationState: string = 'out';
...
sideNavOpened(){
    console.log("SidenNavOpen")
    this.sideNavAnimationState = this.sideNavAnimationState === 'in' ? 'out' : 'in';
  }

  sideNavClosed(){
    console.log("SidenNavClose")
    this.sideNavAnimationState = this.sideNavAnimationState === 'in' ? 'out' : 'in';
  }
`

component.html：

`
<mat-nav-list [@sideNavLink]="sideNavAnimationState">
    <a mat-list-item href="">Merchandise</a>
    <a mat-list-item href="">Gallery</a>
</mat-nav-list>
`

以下动画仅在侧面导航打开时有效。它关闭时不会被触发：

`
animations: [
    trigger('sideNavLink', [
      transition('out => in', [
        query('a', [
          style({ opacity: 0, transform: 'translateX(-100%)' }),
          stagger(250, [
            animate('.3s cubic-bezier(.52,-0.21,.29,1.26)', style({ opacity: 1, transform: 'translateX(0)'}))
          ])
        ])
      ]),
      transition('in => out', [
        query('a', [
          style({ opacity: 1, transform: 'translateX(0)' }),
          stagger(250, [
            animate('.3s cubic-bezier(.52,-0.21,.29,1.26)', style({ opacity: 0, transform: 'translateX(-3%)'}))
          ])
        ])
      ])
    ])
  ]
`

我不明白为什么。当它从一个状态转到另一个状态时，它应该被触发。

答案

你确定它没有被触发吗？我复制了你的代码，它似乎工作，但你错过了类似的东西

      state('out', style({ opacity: 0 }))

在你的动画中。如果没有这个，在out动画结束后，不透明度将切换回1。 （什么可以让你想到动画不会被触发）

另一答案

更多地研究这个话题。事实证明，目前你无法控制角度组件所提出的动画。我找到了一个请求此功能的github票证，虽然对话框，但我相信它适用于任何角度材料组件，以允许开发人员覆盖默认动画。

Github ticket