javascript - jQuery .slideUp() 和 .slideDown() 等同于 Angular2

Question

能否指导我如何在 Angular2 中创建相当于 jQuery 的自定义动画 .slideUp()和 .slideDown() .我知道我可以为此使用 jQuery 插件，但很多人建议不要使用它。所以我正在寻找一种替代方法来创建这些动画。单击某个按钮时，slideUp 和 slideDown 将使任何 div 可折叠并带有流畅的动画。

Answer 1

为了为元素创建自定义的 slideUp/Down，我们可以执行以下操作:

1) 根据 height 的样式定义两种状态(打开、关闭)。您还可以添加其他样式，例如 opacity 或 color。

我们使用特殊值 * 来告诉 Angular 在执行期间使用该值。这将包括边距和填充。

2) 添加一个过渡来告诉 Angular 它应该如何从一种状态转到另一种状态。这将定义如何计算中间值(补间)。语法遵循 {{total duration}} [{{delay}}] [{{easing function}}]。时间可以用秒或毫秒表示。例如:.2s, 200ms。省略时的默认缓动函数是 ease。

见下文:

@Component({
  selector: 'my-app',
  template: `
    <h1>App</h1>
    <button (click)="toggle()">Toggle</button>
    <div class="card" [@toggle]="state">
      Click to slideUp/Down
    </div>
  `,
  animations: [
    trigger('toggle', [
      state('open', style({ height: '200px' })),
      state('closed', style({ height: '*' })),
      transition('open <=> closed', animate('200ms ease-in-out'))
    ])
  ],
})
export class App {
  state = "open";
  toggle() {
    this.state = (this.state=="open")? "closed": "open";
  }
}

Plunker