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

Question

我正在尝试自定义语义-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");
});

这是代码笔：

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

希望对您有所帮助！

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

Semantic UI Minimize normal sidebar to icon sidebar

html

javascript

css

jquery

semantic-ui