语义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'); 
}); 

希望这有助于！