javascript - 语义 UI 将普通侧边栏最小化为图标侧边栏

Question

我正在尝试自定义语义用户界面边栏。我打算在单击切换按钮时创建它，它将最小化为带标签(图标)的按钮。但它似乎没有动画，当我将它最小化到带标签的图标侧边栏时，内容(推送内容)似乎没有被拉出。

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");
});

这是代码笔:

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

任何帮助都会很棒!提前致谢。

Answer 1

检查这个 Codepen 。在 .pusher 上添加一个类(class)以及相应地使用 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');
});

希望这对您有所帮助!