Estou tentando animar minha página, mas tenho o seguinte problema:
Tenho uma div de conteúdo na minha página e um botão que abre outra div acima do conteúdo. Gostaria que a div desapareça e deslize, e a div abaixo também deslize para baixo / para cima. Criei a animação que eu queria para a div acima, que é aberta ao clicar, mas não entendo o que fazer com a div de conteúdo, exemplo de código abaixo:

<div class="wrapper">
  <button (click)="animated = !animated"></button>
  <div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
  THIS DIV IS ANIMATED</div>

  <div class="content">THIS IS CONTENT DIV</div>

</div>

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
    }))
  ])
])
]

Devo criar outro gatilho que mova minha div de conteúdo com a animada?