angular - 过渡动画在 Angular 5 中不起作用

Question

我正在开发一个需要滑入/滑出 sidenav 的 Angular 5 应用程序。

尝试使用动画状态来获得这种效果。状态 css 得到正确应用并且 div 进出移动，但是它很跳跃，即 1500 毫秒缓出动画不起作用。

想要的效果

我已导入 BrowserAnimationsModule 并将其添加到app.module.ts中的导入中

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

viewer.component.html

<div id="app-container" *ngIf="supported">
  <div class="container">
    <div class="main-viewport">
      <app-viewer-container viewer_mode=true></app-viewer-container>
    </div>
    <div class="side-bar-container" [@slideInOut]="sidebarState">
      <div class="nav-toggle-btn">
        <div class="btn" (click)="toggleMenu()">
        </div>
      </div>
      <!-- <app-parameter-viewer globals=true></app-parameter-viewer> -->
    </div>
  </div>
</div>

查看器.component.ts

@Component({
  selector: 'app-viewer',
  templateUrl: './viewer.component.html',
  styleUrls: ['./viewer.component.scss'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)',
      })),
      state('out', style({
        transform: 'translate3d(70%, 0, 0)'
      })),
      transition('in <=> out', animate('1500ms ease-out'))
    ]),
  ]
})
export class ViewerComponent implements OnInit {
  // only relevant code added
  sidebarState:string;

  toggleMenu(){
    this.sidebarState = this.sidebarState  == 'out' ? 'in' : 'out';
  }
}

我尝试过的事情

1. 尝试使用 NoopAnimationsModule 而不是 BrowserAnimationModule
2. 尝试根据这个问题将“显示：块”添加到侧边栏容器 div ()
3. 尝试添加 web-animations-js
4. 尝试一起删除缓入出动画并只做动画（1500ms）
5. 尝试删除侧栏容器中的内部子组件，以防那不是动画
6. 尝试使用 animate(1.5s) 和 animate(1500) 而不是 1500ms
7. 尝试将切换按钮移到动画容器之外
8. 重新安装 @angular/animations 和 @angular/platform-b​​rowser

不知道下一步该怎么做！任何帮助将非常感激！

标签： angularangular-animations

Answer 1

这可能是因为您没有初始化组件中的状态：

export class ViewerComponent implements OnInit {

sidebarState = 'out';

   toggleMenu(){
      this.sidebarState = this.sidebarState  == 'out' ? 'in' : 'out';
   }
}