Slide down animation Angular 4

Question

I am trying to animate my page but have the following issue:
I have content div on my page, and a button that opens another div above the content. I would like that div to

Answer 1

This is a clean and easy way to implement a slide down animation in angular 2+

my-component.ts

import { animate, style, transition, trigger } from '@angular/animations';
@Component({
  animations: [
    trigger('slideDownUp', [
      transition(':enter', [style({ height: 0 }), animate(500)]),
      transition(':leave', [animate(500, style({ height: 0 }))]),
    ]),
  ],
})

my-component.html

  I am the content of the div!

my-component.scss

.box {
  overflow: hidden;
}