JQuery slideToggle（）vs CSS動畫

請不要將此標記爲重複項，我不會問使用什麼更好。 I made a slideout navbar the other day，並且我使用jQuery slideToggle()來使動畫起作用。我嘗試過使用CSS轉換，但我失敗了。問題是，是否有可能在沒有jQuery（或者任何JS）的情況下獲得轉換效果（確切地說是JSfiddle的效果）？如果是這樣，怎麼樣？JQuery slideToggle（）vs CSS動畫

來源

2012-06-13 Bluefire

是的，請查看http://www.identifydesign.net/tutorials/css/pure-css-animated-dropdown-menu/ – undefined

請記住，並非所有瀏覽器都支持CSS3動畫。我不確定JS是否享有比CSS3更廣泛的支持，但它可能是值得研究的東西。 – xbonez

據我所知，大多數瀏覽器確實支持大多數JS和jQuery元素（除了IE6之外，其他任何人都會使用它）。 – Bluefire

是的它是可能的（這裏是一個例子：http://jsfiddle.net/DvVLw/3/）例如如果您的項目高度初始設置爲0，並且您爲每個子菜單指定了在動畫結尾處達到的確切高度，因爲CSS3動畫無法（還）與auto關鍵字一起使用（因此從0到auto的動畫不是可能）。

場的高度是很難說當你的菜單是動態的，你不知道前面有多少項目會包含

來源

2012-06-13 16:11:55 fcalderan

哦，一個例子！：D – Bluefire

@Bluefire看到我的更新 – fcalderan

看起來你忽略了我做過的同樣的事情。當您嘗試選擇一個菜單項時，菜單將重新開始捲起。 – sachleen

當然是，但使用這種方法，你將不得不玩的top最初位置（它是負的）

重要部件

#nav li ul { 
    position: absolute; 
    margin-left: -1px; 
    list-style: none; 
    padding: 0; 
    top: -245px; 
    -webkit-transition:all 1s ease; 
    -moz-transition:all 1s ease; 
} 

#nav li:hover ul { 
    visibility: visible; 
    display:block; 
    top: 45px; 
    z-index:-999; /* This is to make the menu be behind the nav bar*/ 
} 

#nav li ul:hover { 
    display: block; 
}

Demo

同時檢查this瞭解幻燈片效果的簡化版本。

來源

2012-06-13 16:14:27 sachleen

有沒有一種CSS方式讓它滑出去，而不是消失（這不是必要的，這只是一種思想）？ – Bluefire

是的，我更新了我的答案。我將轉換代碼從'：hover'移到'#nav li ul'上，以便在懸停時以及將鼠標移出時進行。 – sachleen

而不是使用height0和auto爲什麼不使用CSS transform:translateY()與transition: transform？

使用該解決方案有什麼缺點嗎？

來源

2018-01-12 11:11:47

JQuery slideToggle（）vs CSS動畫

回答

相關問題