Анимация перехода не работает - угловой 6 - PullRequest
Новая
       22

Анимация перехода не работает - угловой 6

0 голосов
/ 29 мая 2018

Мне нужно анимировать при открытии и закрытии 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();     
    }
  }

....

my 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>

не отображает никаких ошибок, просто не применяется анимация ... Куда я иду?

1 Ответ

0 голосов
/ 05 июня 2018

Моя проблема была в анимации. 

  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%)'}))
      ])
   ]
...