angular - 动画过渡不起作用 - 角度 6

Question

打开和关闭 Sidenav 时我需要动画

    animations: [
    trigger('slider', [
      state('open', style(
        {}
      )),
      state('closed', style(
        {}
      )),
      transition('closed => open', animate('0.4s ease-in')),
      transition('open => closed', animate('0.4s ease-out'))      
    ])
  ]

...

  @Input('state') state: string = 'closed';


  toggleState() {
    this.state = this.state === 'open' ? 'closed' : 'open';
  }

  openSidenav() {
    this.opened = true;
    this.aux = 0;
    this.toggleState();
  }

  closeSidenav() {
    if (this.opened) {
      this.opened = !this.opened;
      this.toggleState();     
    }
  }

……

我的 html

<div [@slider]="state" >
    <header> {{ navTitle }} </header>
    <i *ngIf="showCloseButton" class="iconic" (click)="closeSidenav()"></i>
    <ng-content></ng-content>
</div>

<div *ngIf="backdrop && opened" class="sidenav-backdrop"></div>

不显示任何错误只是不应用动画......我哪里出错了？

Answer 1

我的问题是在动画中。

  animations: [
    trigger('slider', [
      state('open', style(
        {
          transform: 'translateX(0)'
        }
      )),
      transition('void => open', [
        style({transform: 'translateX(-100%)'}),
        animate(300)
      ]),   
      transition('open => void', [
        animate(100, style({transform: 'translateX(-100%)'}))
      ])
   ]