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

希望这有帮助！

语义UI将正常侧边栏最小化为图标侧边栏

1 个答案: