Estoy intentando animar mi página pero tengo el siguiente problema:
Tengo contenido div en mi página y un botón que abre otro div encima del contenido. Me gustaría que ese div se desvanezca y se deslice hacia adentro, y el div a continuación también se deslice hacia abajo / arriba. Creé la animación que quería para el div anterior que se abre al hacer clic, pero no entiendo qué hacer con el div de contenido, ejemplo de código a continuación:

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

¿Debo crear algún otro disparador que mueva mi contenido div con el animado?