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下拉菜單不是動畫

回答

相關問題