語義UI最小化正常側邊欄到圖標側邊欄

Question

我正在嘗試定製semantic-ui側邊欄。我打算創建時，我點擊切換按鈕，它將最小化到標記（圖標）之一。但它似乎並不動畫，並且當我將其最小化到標記的圖標側邊欄時，內容（推送內容）似乎不會被拉動。

HTML

<div class="ui left demo vertical inverted visible sidebar menu"> 
    <a class="item"> 
     <i class="home icon"></i> 
     Home 
    </a> 
    <a class="item"> 
     <i class="block layout icon"></i> 
     Topics 
    </a> 
    <a class="item"> 
     <i class="smile icon"></i> 
     Friends 
    </a> 
</div> 
<div class="pusher"> 
    <a href="#" id="toggle-btn">Toggle</a> 
</div> 

JS

$("#toggle-btn").click(function() { 
    $(".ui.sidebar") 
    .toggleClass("labeled icon"); 
}); 

而這裏的codepen：

http://codepen.io/andhikaribrahim/pen/rWNEzr

任何幫助將是巨大的！ 在此先感謝。

Answer 1

結算這個Codepen。在.pusher上添加一個類，並使用jQuery進行相應的動畫處理。另外，使用CSS轉換插入動畫。

僅供參考，

CSS：

.ui.left { 
    transition: width .2s linear; 
} 

.labeled.icon { 
    width: 84px !important; 
} 

.pusher.push { 
    transform: translate3d(84px,0,0) !important; 
} 

JS：

$("#toggle-btn").click(function() { 
    $(".ui.sidebar").toggleClass("labeled icon"); 
    $(this).parent().toggleClass('push'); 
}); 

希望這有助於！