Question

我正在尝试使用angular在导航栏中创建扩展效果。

当我单击“ mostrarinformationaçes”时，我需要内容必须显示。

问题是页脚的上半部分没有跟随效果。

我尝试类似的事情：

<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>

我的动画：

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

如果我将动画直接放在页脚中，则效果可以工作，但是translate3d使我的导航离开页面，滚动。

我的CSS：

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

Answer 1

您的代码不足以评估您的问题。通常，您需要使用Angular和任何其他网络语言来很好地解释CSS。在那种情况下，我会提出一个包装元素：

<div class="wrapper">
  <div class="ride-up">
<div class="ride-up-element"> Some text here </div>
</div>
 </div

然后是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....
}

导航栏中的扩展效果

1 个答案: