製作導航欄滑入視圖從頂部

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

我已經設置animation-iteration-count到infinite進行演示動畫transform: translate以獲得期望的結果。在你的情況下，將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>