Question

我目前在我的角度应用程序（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>

使导航栏从顶部滑入视图

1 个答案: