1

I'm working on creating a "drawer" div that will appear and disappear with a transition from the right side of the browser window. I'm using Angular-UI-Bootstrap's collapse directive, modified with code provided in the answer to this question. I've got the transition working and it looks good when the drawer collapses, but when the div expands into view, it transitions oddly.

enter image description here

Referring to the image above, the bluish area on the right (the drawer div) expands at an increasingly slower pace, almost stopping when it gets to the end of the "Some Link" <li><a> content, then speeds up to a normal pace again. This weirdness only happens on the expand but not on the collapse. View code and oddness in action in 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;
}

The javascript for the modified angular directive is available on the accepted answer for the question linked above, but I will post it here if requested.

Does anyone know why this is happening and how I can fix it so that the expand transition is smooth, like the collapse?

Community
  • 1
  • 1
AJ.
  • 16,368
  • 20
  • 95
  • 150

1 Answers1

1

This is happening because element[0].scrollWidth is not representative of the final expand size - it's expanding to the value of 102px and then snapping out to be finalized at the full size (200px - the width of #drawer).

You can pass through this size to the doTransition call in expand() and it will be smooth:

doTransition({ width: '200px' })...
Abe Hendlish
  • 707
  • 5
  • 11
  • Bam! Thank you. I should have seen that, and even set up the attribute for `expandWidth` myself, but missed it using `element[0]` there. – AJ. Jul 02 '14 at 22:09