CSS下拉菜单不是动画

我正在尝试学习如何在DevTips Tutorial中使用CSS进行动画制作，但由于我的代码没有正确地为菜单项设置动画，因此不得不停止大约8分钟。他们只是流行到位，但应该同时翻转和淡入。CSS下拉菜单不是动画

我希望在CodePen上发布的东西不是禁忌;如果是的话，我真诚的道歉。如果它是犹太教徒，CLICK HERE。

据我所知，我的代码完全匹配教程中的内容，所以我希望有人能够发现我忽略的任何错误。

Achtung !!我的codepen语法使用Pug和SASS预处理器，所以如果你不喜欢看这种语法，编译后的HTML和CSS将包含在下面。

非常感谢提前。

HTML ::

<nav> 
    <ul> 
    <li>style 1 
     <ul class="drop-menu menu-#{i}"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li> 
     <li>cuatro</li> 
     <li>cinco</li> 
     <li>seis</li> 
     </ul> 
    </li> 
    <li>style 2 
     <ul class="drop-menu menu-#{i}"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li> 
     <li>cuatro</li> 
     <li>cinco</li> 
     <li>seis</li> 
     </ul> 
    </li> 
    <li>style 3 
     <ul class="drop-menu menu-#{i}"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li> 
     <li>cuatro</li> 
     <li>cinco</li> 
     <li>seis</li> 
     </ul> 
    </li> 
    <li>style 4 
     <ul class="drop-menu menu-#{i}"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li> 
     <li>cuatro</li> 
     <li>cinco</li> 
     <li>seis</li> 
     </ul> 
    </li> 
    </ul> 
</nav>

CSS ::

nav { 
    padding: 50px; 
    text-align: center; 
} 
nav > ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: inline-block; 
    background: #ddd; 
    border-radius: 5px; 
} 
nav > ul > li { 
    float: left; 
    width: 150px; 
    height: 65px; 
    line-height: 65px; 
    position: relative; 
    text-transform: uppercase; 
    font-size: 14px; 
    color: DarkGray; 
    color: rgba(0, 0, 0, 0.7); 
    cursor: pointer; 
} 
nav > ul > li:hover { 
    background: #d5d5d5; 
    border-radius: 5px; 
} 

ul.drop-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    padding: 0; 
} 
ul.drop-menu li { 
    background: #666; 
    color: White; 
    color: rgba(255, 255, 255, 0.7); 
} 
ul.drop-menu li:hover { 
    background: #606060; 
} 
ul.drop-menu li:last-child { 
    border-radius: 0 0 5px 5px; 
} 

ul.drop-menu li { 
    display: none; 
} 

li:hover > ul.drop-menu li { 
    display: block; 
} 

li:hover > ul.drop-menu.menu-1 { 
    -webkit-perspective: 1000px; 
      perspective: 1000px; 
} 
li:hover > ul.drop-menu.menu-1 li { 
    opacity: 0; 
    -webkit-animation-name: menu1; 
      animation-name: menu1; 
    -webkit-animation-duration: 500ms; 
      animation-duration: 500ms; 
    -webkit-animation-timing-function: ease-in-out; 
      animation-timing-function: ease-in-out; 
    -webkit-animation-fill-mode: forwards; 
      animation-fill-mode: forwards; 
} 
@-webkit-keyframes menu1 { 
    0% { 
    opacity: 0; 
    -webkit-transform: rotateY(-90deg) translateY(30px); 
      transform: rotateY(-90deg) translateY(30px); 
    } 
    100% { 
    opacity: 1; 
    -webkit-transform: rotateY(0deg) translateY(0px); 
      transform: rotateY(0deg) translateY(0px); 
    } 
} 
@keyframes menu1 { 
    0% { 
    opacity: 0; 
    -webkit-transform: rotateY(-90deg) translateY(30px); 
      transform: rotateY(-90deg) translateY(30px); 
    } 
    100% { 
    opacity: 1; 
    -webkit-transform: rotateY(0deg) translateY(0px); 
      transform: rotateY(0deg) translateY(0px); 
    } 
}

来源

2017-02-09 Chaz Sutherland

看起来你在这一行很简单的问题，你的哈巴狗处理：

ul(class="drop-menu menu-#{i}")

这没有像预期的那样通过“menu-4”添加类“menu-1”。为了解决这个问题写帕格声明是这样，而不是：

ul(class="drop-menu menu-" + i)

这是帕格指定使用新的语法，你可以阅读更多here。

来源

2017-02-09 05:10:42

解决！非常感谢迪伦。 –

CSS下拉菜单不是动画

回答

相关问题