模仿抽屉 opened/closed 的 slide/animate 行为

Question

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

在你点击橙色箭头之前 div 我已经将 id="sidebar" 设置为 display:none;

当您单击橙色箭头 div 时，它向左侧移动 200px，侧边栏显示属性设置为 'auto'。

整个动画不是我想要的

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

如何获得 flyout/drawer 打开和关闭的行为？

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 + overflow:hidden
在打开时设置一个 toggleClass，宽度：需要的宽度，当它关闭时，切换回宽度：0；
仅此而已。

也许可以通过 js 来完成，比如动画那个宽度，在一定的时间内，我使用 transition prop 来动画它。[=15=]

我添加了额外的 css 使用，在 css 选项卡中，您可以查看 demo here 并希望这个会帮你的

好的，既然你知道抽屉的宽度和触发器的宽度，你就可以为其容器设置一个宽度。考虑到这种情况，我对触发器和抽屉的原始 css 进行了一些更改，以绝对定位，因此我可以为宽度或 left/right 道具设置动画。这样更容易。

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

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

更新 v3

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

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

抽屉上还设置了一些静态宽度（我想是 200 px），但是如果你想让它包含在它的父级中，你可以得到父级的宽度，将它设置到抽屉上，然后它应该没问题。

查看 new pen here

模仿抽屉 opened/closed 的 slide/animate 行为

imitate the slide/animate behavior of a drawer being opened/closed

jquery

css

html

jquery-ui