Angular 中的动画

Question

我使用 SidebarService Example 创建了一个 Angular 边栏：

export class SidebarService {
  public hidden: boolean = true;
  toggle(): void {
    this.hidden = !this.hidden;
  }
}

然后我有一个侧边栏组件：

@Component({
  selector: 'sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: [ './sidebar.component.css' ]
})

export class SidebarComponent {

  constructor(public sidebarService: SidebarService) { }

}

哪个模板是：

<div id="sidebar" [ngClass]="{'hidden': sidebarService.hidden}">

  <button type="button" (click)="sidebarService.toggle()">
    Close Sidebar
  </button>

  <nav>
    <ul>
      <li>
        <a href="#">Page 1</a>
      </li>
      <li>
        <a href="#">Page 2</a>
      </li>
    </ul>
  </nav>

</div>

最后我使用如下：

<sidebar></sidebar>

<button type="button" (click)="sidebarService.toggle()">
  Open Sidebar
</button>

<h1>Main Content</h1>

问题

而不是 Hide/Show 侧边栏是否可以从左侧滑动？
使用服务是在不同地方共享 hide/show 侧边栏的好方法吗？
或者有更好的选择吗？

Answer 1

侧边栏不是 Hide/Show 可以从左侧滑动吗？

您可以将 angular 动画用于 ngIf 切换而不是 hidden class。

<div *ngIf="!sidebarService.hidden" id="sidebar" [@anim]="sidebarService.hidden">

和 ts 文件：

animations: [
    trigger('anim', [
      transition(':enter', [
        style({transform: 'translateX(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateX(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateX(-100%)'}))
      ])
    ])
  ]

演示 here

Angular 中的动画

Animation in Angular

angular

angular7