Angle navbar expansion effect

Question

I’m trying to make a navbar expansion effect at the angle.

When you click on the "show information" link the content should go up, and when you click on "hide", the content should go down.

The problem is that the top of my footer is not keeping up with the expansion effect.

I tried something like:

<footer class="page-footer font-small footer-fundo-cinza">
   <div class="container">
      <div class="row pt-3">
         <div class="col-md-4">
            <img src="../../../assets/estilomotocar-rodape.png" class="img-responsive img-fluid">
         </div>
      </div>
   </div>
   <div [@fadeInUpDown]="mostrar_informacoes" [@statusDisplay]="mostrar_informacoes" class="row">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <hr>
         </div>
      </div>
   </div>
</footer>

My animations:

export const statusDisplay =

    trigger('statusDisplay', [
        state('aberto',  style({ display: 'block' })),
        state('fechado', style({ display: 'none'  })),
        transition('fechado => aberto', animate('0ms ease')),
        transition('aberto => fechado', animate('0ms 200ms ease'))
    ])


export const fadeInUpDown =

    trigger('fadeInUpDown', [
        state('fechado', style({
            transform: 'translate3d(0,100%,0)'
        })),
        state('aberto', style({
            transform: 'translate3d(0,0,0)'
        })),
        transition('fechado <=> aberto', animate('400ms ease'))
    ])

If I put my fadeInUpDown animation right on my footer the effect works as expected, but it applies translate3d at the beginning by pushing it off the page, enabling a scroll.

My css:

 footer{
   position: absolute;
   bottom: 0;
   width: 100%;
 }