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

Question

我需要在打开和关闭侧导航时制作动画

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();     
}
}

....

我的网页

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