title: Slide down animation Angular 4
body: <p>I am trying to animate my page but have the following issue:<br>
   I have content div on my page, and a button that opens another div above the content. I would like that div to fade and slide in, and the div bellow to slide down/up as well. I created the animation I wanted for the div above that opens on click, but don't understand what to do with content div, example code bellow:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;button (click)="animated = !animated"&gt;&lt;/button&gt;
    &lt;div *ngIf="animated" [@slideInOutAnimation] class="animated-div"&gt;
    THIS DIV IS ANIMATED&lt;/div&gt;
  
    &lt;div class="content"&gt;THIS IS CONTENT DIV&lt;/div&gt;
  
  &lt;/div&gt;
  
  TYPESCRIPT:
  animations: [
  trigger('slideInOutAnimation', [
  
    state('*', style({
  
    })),
    transition(':enter', [
      style({
        transform: 'translateY(-10%)',
        opacity: 0
      }),
      animate('.5s ease-in-out', style({
        transform: 'translateY(0)',
        opacity: 1
      }))
    ]),
    transition(':leave', [
      animate('.5s ease-in-out', style({
        transform: 'translateY(-10%)',
        opacity: 0
      }))
    ])
  ])
  ]
  </code></pre>
  
  <p>Should I create some other trigger that will move my content div with the animated one?</p>