jquery - 模仿打开/关闭抽屉的滑动/动画行为

Question

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

在您点击橙色箭头 div 之前，我已将 id="sidebar"设置为显示:无；

当您单击橙色箭头 div 时，它会向左侧移动 200 像素，侧边栏显示属性设置为“自动”。

整个动画不是我想要的。

我希望整个 sidebarContainer + the 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

如果我没理解错的话，当你点击那个 handle 时，一些东西应该从左向右滑动，当你再次点击它时，反之亦然。

• 从 #sidebar 中移除 display none
• 一些额外的 css 将处理它的可见性，宽度:0 + overflow:hidden
• 在打开时设置一个 toggleClass 到 width: 需要的宽度，当它关闭时，切换回 width: 0;
• 就是这样。

也许它可以通过 js 来完成，比如为宽度设置动画，在一定时间内，我使用了 transition 属性来为其设置动画。

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

---

好的，既然你知道抽屉的宽度和触发器的宽度，你就可以为其容器设置一个宽度。鉴于这种情况，我已经更改了一些您的原始 css，以绝对定位触发器和抽屉，因此我可以为宽度或左/右 Prop 设置动画。这样更容易。

我做了 2 个例子来说明这个例子，希望这次我做对了:)标记结构基本相同，只有 id/class 名称不同(id 名称太长无法跟踪谁和在做什么)。

查看 demos here ，让我知道进展如何。

---

更新 v3

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

现在关于 z-index 的问题，其实很简单，因为抽屉被向右推了 200px，它会落在它相邻的兄弟下面，所以你必须添加一些 z-index，来颠倒它们的顺序。

抽屉上还设置了一些静态宽度(我想是 200 px 左右)，但是如果你想让它包含在它的父级中，你可以得到父级的宽度，将它设置到抽屉上，它应该是好的。

查看 new pen here