Question

我正致力于创造一个＆＃34;抽屉＆＃34;通过浏览器窗口右侧的转换显示和消失的div。我使用了Angular-UI-Bootstrap collapse directive，并使用this question答案中提供的代码进行了修改。我已经完成了过渡工作，当抽屉折叠时看起来很好，但是当div扩展到视图时，它会奇怪地过渡。

enter image description here

参考上面的图像，右侧的蓝色区域（抽屉div）以越来越慢的速度扩展，当它到达＆＃34; Some Link＆＃34; <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;
}

修改后的角度指令的javascript可以在上面链接的问题的接受答案中找到，但如果请求，我会在此处发布。

有谁知道为什么会发生这种情况以及如何解决这个问题，以便扩展转换顺利进行，就像崩溃一样？

Answer 1

这种情况正在发生，因为元素[0] .scrollWidth不能代表最终的扩展大小 - 它会扩展到102px的值，然后以全尺寸（200px - #drawer的宽度）进行捕捉。

您可以在expand（）中将此大小传递给doTransition调用，它会很流畅：

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

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

1 个答案: