Angular2中的jQuery .slideUp（）和.slideDown（）等价物

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

Answer 2

下面是使用动态高度值向下和向下滑动的动画。

如果对象上没有边距和/或填充，则可以删除这些设置。

animations: [
  trigger('slideUpDown', [
    transition('void => *', [
      style({height: 0, margin: 0, padding: 0, opacity: 0}),
      animate(500, style({height: '*', margin: '*', padding: '*', opacity: 1}))
    ]),
    transition('* => void', [
      style({height: '*', margin: '*', padding: '*', opacity: 1}),
      animate(500, style({height: 0, margin: 0, padding: 0, opacity: 0}))
    ])
  ])
] 

Answer 3

纯CSS方法：

HTML

<button (click)="toggleSlide=!toggleSlide">Toggle</button>
<div class="slider closed" [ngClass]="{'closed':!toggleSlide}">
  <div class="content"></div>
</div>

CSS

.slider {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(1,0,1,0);
}

.slider.closed {
  max-height: 0;
  transition: max-height 0.7s cubic-bezier(0,1,0,1);
}

.content{
  height: 200px;
  width: 200px;
  background-color: blue;
}

这里有 Plunker的例子

Answer 4

你可以使用Element.animate()

 div > div { width: 300px; height: 200px; display: block; background: blue; } 

 <div> click <div></div> </div> <script> const div = document.querySelector("div"); const props = ["200px", "0px"]; // from, to div.onclick = () => { div.firstElementChild.animate({ height: props }, { duration: 1000, easing: "ease-in-out", iterations: 1, fill:"forwards" }) .onfinish = function() { props.reverse() } } </script>