切換CSS3動畫

Question

我正在嘗試製作一個切換側邊欄的動畫。

當我嘗試通過添加隱藏欄類來隱藏側邊欄和CSS3 Transition屬性時，它完美地工作。但這是一個切換，當我再次展示時，沒有轉換。菜單只是快照。

#page-content.hidebar { 
transition: margin 0.3s ease; 
margin-left: 0; 
} 

任何人都可以建議如何切換側邊欄到可見性以及如何具有過渡屬性？

我附上一個小提琴作爲例子。

http://jsfiddle.net/dxYCm/1/

Answer 1

你需要做的幾件事情：因爲所有的規則已經在CSS中使用ID選擇應用

• ，類選擇都沒有效果，如CSS具體它有低點可以覆蓋在id下指定的先前規則。所以你需要添加!important。 http://htmldog.com/guides/css/intermediate/specificity/瞭解更多有...

• 你需要把white-space:nowrap;作爲第一個div的文/內容將捲起的股利將獲得小。

檢查出來>>>

http://jsfiddle.net/techsin/dxYCm/5/

Answer 2

你並不需要一個hide類可言，jQuery有真棒內置在做同樣的事情像.toggle()和.slideToggle功能！

的.toggle

$("a#menu-trigger").click(function() { 
    $("#page-sidebar").toggle("fast"); 
    $("#page-content").toggleClass("hidebar"); 
}); 

Here's an example另外，要轉變適用於#page-content，不#page-content.hidebar所以它轉換既擴張和收縮

如果你仍然想使用.hide做類不改變jQuery或HTML，你可以做到這一點this way，通過切換寬度和高度

R對於elevant CSS：

.hide {height:0px; width:0px; color:transparent;} 
#page-sidebar {width: 230px; float:left; transition: all 0.3s ease;}