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

I quite prefer the wildcard operator when working with height transitions to allow for dynamic height content.

// Bind to true/false states via 0 and 1 values

trigger('slideUpDown', [
  state('0', style({ 'max-height': '*', opacity: 1 })),
  state('1', style({ 'max-height': '0px', opacity: 0 })),
  transition(':enter', animate('400ms ease-in-out')),
  transition('* => *', animate('400ms ease-in-out')),
])

usage:

somewhere else or in the template you can toggle the state.