模拟正在打开/关闭的抽屉的滑动/动画行为

Question

这是我创建的笔： http : //codepen.io/helloworld/pen/ogwqpX?editors=101

在单击橙色箭头div之前，我已将id =“ sidebar”设置为显示：无；

单击橙色箭头div时，它将向左移动200px，并且侧边栏显示属性设置为“自动”。

整个动画不是我想要的。

我希望整个sidebarContainer + sidebarHandle / sidebar从sidebarHandle的位置开始向左侧移动200px。 目前，动画是从侧栏的右侧开始的，因此动画看起来很糟。

如何获得弹出/抽屉打开和关闭的行为？

的HTML

<div  id="view" style="height:400px;">
    <div style="height:100%;background:black;" class="col-xs-3">
        column 3
    </div>
    <div style="height:100%;background:red;" class="col-xs-4">
       column 4
    </div>
    <div id="availableSidebarColumn" style="padding:0;background:yellow;height:100%;" class="col-xs-1">

        <div class="sidebarClosed" id="sidebarContainer" style="position:absolute;z-index:10; display:table;height:100%;width:30px;background:green;">

                <div  id="sidebarHandle" style="border:1px solid black;cursor:pointer;background-color: orange;width:100%;display: table-cell;height:100%;vertical-align: middle;font-size:32px;" class="text-center glyphicon glyphicon-chevron-left">
                </div>

               <div id="sidebar" style="display:none;border:1px solid black;background:orange;height:100%;width:200px">
                 <div style="background:lightblue;height:10%;">navigation</div>
                 <div style="background:lightgreen;height:90%;">content</div>
               </div>              
       </div>      

    </div>
    <div style="height:100%;background:pink;" class="col-xs-4">
       column 4
    </div>
</div>

的CSS

*{
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box; 
}

JS

 $(function () {
      $('#view').height(400);

        $('#sidebarHandle').click(function () {

               $('#sidebarHandle').toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
               $('#sidebarContainer').animate({right:'200px'},350); // 200px is the width of the sidebar
               $('#sidebar').css('display', "auto");  

        });
   });

Answer 1

如果我理解正确，当您单击该手柄时，一些东西应从左向右滑动，反之亦然。

• 从＃ #sidebar删除显示内容
• 一些额外的CSS将处理其可见性，宽度：0 +溢出：隐藏
• 设置一个toggleClass，在其打开之间，到width：所需的宽度之间，以及当它关闭时，切换回width：0;
• 就是这样。

也许可以通过js完成，例如在一定时间内对宽度进行动画处理，我已经使用了transition道具对其进行了动画处理。

我在css选项卡中添加了使用的额外css，您可以在此处查看演示 ，希望这会对您有所帮助

---

好的，因为您知道抽屉的宽度和触发器的宽度，所以可以为其容器设置宽度。 在这种情况下，我将触发器和抽屉的原始css更改为绝对位置，以便为宽度或左/右道具设置动画。 这样比较容易。

我已经做了两个例子来说明这个例子，希望这次我看对了:)标记结构基本相同，只是id / class名称不同（id名称太长，无法跟踪谁和做什么） 。

在此处查看演示 ，让我知道如何进行。

---

更新v3

抽屉被推到右侧，因为在我最初的示例中，我在这两个抽屉之间设置了一些边距，以更好地了解发生了什么。

现在，对于z-index问题，非常简单，因为将抽屉向右推200px，它会落在其相邻的同级之下，因此您必须添加一些z-index来反转其顺序。

同样，抽屉上设置了一些静态宽度（我认为是200 px），但是如果您希望将其包含在其父对象中，则可以获取父对象的宽度，将其设置为抽屉，这样就可以了。

在这里检查新笔