时间戳

首页 > 解决方案 > 导航栏中的扩展效果

html - 导航栏中的扩展效果

问题描述

我正在尝试使用 angular 在我的导航栏中制作扩展效果。

当我点击“mostrar informaçõ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%;
 }

标签： htmlangulartypescript

解决方案

您的代码不足以评估您的问题。通常在 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....
}

推荐阅读