Expansion effect in navbar - html

Question

I'm trying to make an expansion effect in my navbar using angular.
I need when I click in "mostrar informações" the content must ride up.
The problem is that the superior part of my footer is not following the effect.
I try 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 animation direct in my footer the effect work but the translate3d make my nav go out the page, making a scroll.
My CSS:
footer{
position: absolute;
bottom: 0;
width: 100%;
}

Answer 1

Your code is not enough to evaluate your problem . Generally in Angular and any other web language you would need to explain your css very good . In that case I would propose a wrapper element :
<div class="wrapper">
<div class="ride-up">
<div class="ride-up-element"> Some text here </div>
</div>
</div
And then the CSS :
.wrapper {
display : flex ;
flex-direction : row/column ;
width : you choose it ;
height : as well :
other-options : also you choose;
}
.ride-up {
width : you choose it ;
height : as well :
}
.ride-up:hover {
some css goes here ....
}
.ride-up-element {
some other css goes here....
}