jQuery切換不觸發css動畫？

我做了一個小小的切換按鈕，您可以點擊並打開一個隱藏的菜單，同時旋轉十字。jQuery切換不觸發css動畫？

我已經使用css動畫旋轉十字，子菜單出現，但我需要它動畫滑出很好，而不僅僅是出現。從顯示無，到顯示塊似乎並沒有用css動畫，反正有沒有這個？

或者css動畫不能在顯示樣式上工作？

我有一個小提琴here

<nav class="filter_nav inner"> 
    <ul class="subnav"> 
     <li>Text</li> 
     <li>Text</li> 
     <li>Text</li> 
     <li>Text</li> 
     <li>Text</li> 
    </ul> 
    <ul class="toggleNavOuter"> 
     <li class="toggleNavButton">+</li> 
     <li>Filter</li> 
    </ul> 

</nav>

JS這裏..

$(function(){ 
    $(".toggleNavOuter").click(function() { 
     $(".subnav").toggleClass("active"); 
     $(".toggleNavOuter").toggleClass("active"); 
     $(".toggleNavButton").toggleClass("active"); 
    }); 
    });

來源

2014-10-20 user4630

希望你的小提琴沒有缺陷。 'onclick'函數很有效，你的問題是什麼。 – Benjamin 2014-10-20 13:20:43

十字旋轉。要顯示/隱藏動畫，您可以嘗試[.toggle（）]（http://api.jquery.com/toggle/）並設置持續時間。 – Regent 2014-10-20 13:22:30

你不能添加轉換到顯示:)嘗試使用寬度和不透明度，而不是從顯示無動畫使用css3轉換:) – 2014-10-20 13:23:22

你不能動畫display屬性是什麼，你需要的是動畫width。

一種選擇可能是：添加width:0代替display:none

.filter_nav .subnav { 
    width:0; 
    transition: width 0.8s ease-in-out 0s; 
}

，然後active地方某些固定寬度：

.filter_nav .subnav.active { 
    width:300px; 
}

入住這Demo Fiddle

來源

2014-10-20 13:24:10 DaniP

謝謝，我沒有意識到你不能動畫的顯示屬性他們應該改變這一點。謝謝大家的幫助。 – user4630 2014-10-20 13:28:35

Np @ user4630很高興幫助...記住你也可以使用jquery動畫寬度，如果你想要一些動態寬度，你也可以使用jquery來計算值。 – DaniP 2014-10-20 13:34:18

jQuery切換不觸發css動畫？

回答

相關問題