Angular 2 animate sidebarmeu

Question

我想要一个按钮上打开的侧边栏菜单。侧边栏菜单必须从左侧缓慢动画。当在菜单外部点击或侧边栏中的链接点击时，叠加边栏应该会出现。任何人都可以使用角度2或更高版本。在角度代码的@component部分中使用什么函数。      我也尝试过prime-ng，但我不想要这种方法。

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate} from 
'@angular/animations';

      @Component({ selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 animations: [
      trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)'
       })),
  state('out', style({
    transform: 'translate3d(100%, 0, 0)'
  })),
  transition('in => out', animate('400ms ease-in-out')),
  transition('out => in', animate('400ms ease-in-out'))
]),
 ]
     })
    export class AppComponent {
     title = 'app works!';
   menuState = 'out';
   toggleMenu() {
this.menuState = this.menuState === 'out' ? 'in' : 'out';
}
}

Answer 1

Angular素材通过sidenav提供您想要的内容。

Here是一个显示示例的stackblitz。