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

Question

我正在开发一个Angular 5应用程序，它需要滑入/滑出侧面。尝试使用动画状态来获得此效果。状态css正在被正确应用并且div移入和移出，但它是跳跃的，即1500ms的缓出动画不起作用。

期望效果 -

我已导入BrowserAnimationsModule并将其添加到 app.module.ts 中的导入内容 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

viewer.component.html 文件 -     

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

viewer.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'; } }

我尝试过的事情

• 尝试使用NoopAnimationsModule而不是BrowserAnimationModule
• 尝试添加＆＃39;显示：阻止＆＃39;基于这个问题（）
到side-bar-container div
• 尝试添加web-animations-js
• 尝试一起移除缓入动画并进行动画制作（1500毫秒）
• 尝试删除侧栏容器中的内部子组件，这是因为没有动画的内容
• 尝试使用动画（1.5s）和动画（1500）代替1500ms
• 尝试将动画容器外的切换按钮移开
• 重新安装@ angular / animations和@ angular / platform-b​​rowser

不确定下一步该做什么！任何帮助将非常感激！

Answer 1

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

export class ViewerComponent implements OnInit {

<强> sidebarState = 'out';

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

Answer 2

我刚遇到这个问题。问题是@ angular / animation与@ angular / core（5.2.0）的版本不同（6.0.0）。刚刚使用＆＃34; ng update @ angular / core＆＃34;更新为Angular 6.有关Angular 6的信息可以在他们的博客上找到：https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

也许这也可能是你的问题？