Angular2 中的 jQuery .slideUp() 和 .slideDown() 等效项

Question

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

Answer 1

你可以使用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>

Answer 2

为了为元素创建自定义的上滑/下滑，我们可以执行以下操作：

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 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 示例here

Answer 4

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

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

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}))
    ])
  ])
]