Question

我制作了一个带有动画的导航栏，每次重新加载网站时都会向后移动。只有当它完全打开宽度时它才会向后移动：275并且只有当我将鼠标从它上面移开时（与悬停相反）

CSS：

#navigation {width: 5px; height: calc(100vh - 50px); opacity: 0; text-align: center; padding-top: 10px; padding-bottom: 10px; animation: pulse-out 0.5s;}
#navigation .hidden > h3 {color: #FFFFFF; text-transform: uppercase;}
#navigation .hidden a {color: #FFFFFF; text-decoration: none; display: block; padding-top: 2px; padding-bottom: 2px; text-transform: uppercase; font-size: 14px;}
#navigation .hidden a:hover {color: #8e44ad;}
#navigation:hover {width: 275px; background: #171C21; animation: pulse-in 0.5s; opacity: 1;}
@keyframes pulse-in {
    0% {
        width: 5px;
        opacity: 0;
    }

    100% {
        width: 275px;
        opacity: 1;
    }
}

@keyframes pulse-out {
    0% {
        width: 275px;
        opacity: 1;
    }

    100% {
        width: 5px;
        opacity: 0;
    }
}

我该如何解决？实时预览：http://awesomeness.adam.zur.io/ 此外文本不应该以这种方式消失，它应该首先消失，然后慢慢地将其宽度改回5px。

Answer 1

你把

#navigation {
width: 5px; 
height: calc(100vh - 50px); 
opacity: 0; 
text-align: center; 
padding-top: 10px; 
padding-bottom: 10px; 
animation: pulse-out 0.5s;}

并在刷新页面时启动动画。这就是你看菜单是如何关闭的原因（导致脉冲输出正常）。删除此样式，一切都将刷新。最好使用JS悬停代替（当你从菜单中留下鼠标时，悬停开始动画脉冲输入并开始动画脉冲输出）

导航栏在重新加载网站后向后移动

1 个答案: