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

Answer 4

您可以使用Element.animate()

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

4 个答案:

HTML

CSS