使导航栏从顶部滑入视图

Question

我目前在我的 Angular 应用 (2+) 中有以下代码：

.header {
  background: rgba(white, 0);
  &.fixed-top {
    background: rgba(white, 1);
    border-bottom: solid whitesmoke 1px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
}

<nav class="navbar navbar-toggleable-sm header" [class.fixed-top]="stickyHeader" (scroll)="scrollHandler()">...</nav>

handleScroll() 函数只是在用户向下滚动“足够”像素后将stickyHeader 设置为true，因此标题菜单变得粘滞。这里是：

stickyHeader = false;

@HostListener('window:scroll', [])
scrollHandler() {
  this.stickyHeader = window.scrollY > 90;
}

我的问题是：如何使该菜单看起来从顶部滑动（动画），就好像它从浏览器上方下降一样？！

Answer 1

我可以通过使用CSS animations 为transform: translate 设置动画来获得所需的结果

出于演示目的，我已将 animation-iteration-count 设置为 infinite。在您的情况下，它将是 1

给control the speed 使用animation-duration

我也使用animation-fill-mode 并将其设置为forwards 到stop the animation at the end 并且不让它恢复到原始状态。

我将transform: translate(0, -20px) 添加到.fixed-top 以将其移出显示区域，直到动画开始。

最后我添加了animation-timing-function: ease;来控制how the animation plays。

body {
  margin: 0 auto;
  padding: 0;
}

.fixed-top {
  background: red;
  z-index: 1030;
  width: 100%;
  height: 50%;
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  transform: translate(0, -20px)
}

@keyframes slide {
  0% {
    transform: translate(0, -20px);
    opacity:.1
  }
  100% {
    transform: translate(0, 0);
    opacity:1
  }
}

<div class="fixed-top">test</div>