jQuery .slideUp() and .slideDown() equivalent in Angular2

Question

Can you please guide me on how to create a custom animation in Angular2 equivalent to jQuery .slideUp() and .slideDown(). I know I can use jQuery plugin for this, but many folks recommend not to use it. So I'm looking for an alternate method to create these animations. The slideUp and slideDown will make any div collapsible with smooth animation on click of some button.

Answer 1

In order to create a custom slideUp/Down for an element we can do the following:

1) Define two states (open, close) with according styles for height. You could also add other styles like opacity or color.

We use the special value * to tell Angular to use the value during execution. This will include margins and paddings.

2) Add a transition to tell Angular how it should go from one state to the other. This will define how intermediate values (tweens) will be calculated. Syntax follows {{total duration}} [{{delay}}] [{{easing function}}]. Time can be expressed in seconds or milliseconds. Eg: .2s, 200ms. Default easing function when omitted is ease.

See below:

@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

Below is the animation for slide down and up using dynamic height values.

If there is no margin and/or padding on the object, you can remove those settings.

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

Pure CSS approach:

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

Answer 4

You can use 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>