目前我的 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;
}
我的问题是:如何使该菜单看起来从顶部滑动(动画),就好像它从浏览器上方下降一样?!
最佳答案
我可以通过使用 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>
关于css - 使导航栏从顶部滑入 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44871712/