使用 angular-ui 从/向视口的右边缘展开/折叠 div答案

【问题标题】：Using angular-ui to expand/collapse a div from/to the right edge of the viewport使用 angular-ui 从/向视口的右边缘展开/折叠 div
【发布时间】：2014-07-03 06:11:54
【问题描述】：

我正在创建一个“抽屉”div，它会随着浏览器窗口右侧的过渡而出现和消失。我正在使用 Angular-UI-Bootstrap 的collapse directive，并使用this question 的答案中提供的代码进行了修改。我已经完成了转换，当抽屉折叠时它看起来不错，但是当 div 展开到视图中时，它会奇怪地转换。

参考上图，右侧的蓝色区域（抽屉 div）以越来越慢的速度扩展，当它到达“Some Link”<li><a> 内容的末尾时几乎停止，然后加速到又是正常的节奏。这种怪异只发生在展开时，而不会发生在折叠时。在this plunk 中查看代码和奇怪之处。

HTML：

<body ng-app="app" ng-controller="theController">
    <div id="main" class="col-md-12">
        <div id="drawer" collapse-width="drawerIsCollapsed" expand-width="200">
            <ul>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
            </ul>
        </div>
        <div id="content" class="col-md-12">
            <button type="button" ng-click="drawerIsCollapsed = !drawerIsCollapsed">Toggle</button>
            <h1>This is the main content and it is going to be really wide so i can tell if the text will wrap when i toggle the right drawer or if it will do what it should and continue under the drawer.</h1>
        </div>
    </div>
    <script src="divSandvoxController.js"></script>
</body>

CSS：

body{
    height: 100%;
    width: 100%;
    background-color: #efefef;
}
#main{
    height: 768px;
    width: 100%;
    background-color: aliceblue;
}
#content{
    height: 768px;
    width: 100%;
    background-color: orange;
    position: relative;
}
#drawer{
    height: 768px;
    width: 200px;
    background-color: lightsteelblue;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    white-space: nowrap;
}
.collapsing-width{
    position: relative;
    overflow-x: hidden;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}
.collapse{
    overflow-x: hidden;
}

修改后的 angular 指令的 javascript 可在上面链接的问题的已接受答案中找到，但如果需要，我会在此处发布。

有谁知道为什么会发生这种情况以及如何解决它，以便展开过渡平滑，就像折叠一样？

【问题讨论】：

标签： css angular-ui angular-ui-bootstrap

【解决方案1】：

发生这种情况是因为 element[0].scrollWidth 不代表最终的展开大小 - 它正在展开到 102px 的值，然后以完整大小（200px - #drawer 的宽度）最终确定。

你可以把这个大小传递给expand()中的doTransition调用，它会很流畅：

doTransition({ width: '200px' })...

【讨论】：

砰！谢谢你。我应该已经看到了，甚至自己为expandWidth 设置了属性，但在那里使用element[0] 错过了它。