css - 使导航栏从顶部滑入 View

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