title: Using angular-ui to expand/collapse a div from/to the right edge of the viewport
body: <p>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 <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer"><code>collapse</code> directive</a>, modified with code provided in the answer to <a href="https://stackoverflow.com/q/22654933/27457">this question</a>.  I've got the transition working and it looks good when the drawer collapses, but when the div expands into view, it transitions oddly.</p>
  
  <p><img src="https://i.stack.imgur.com/J7QaV.png" alt="enter image description here"></p>
  
  <p>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" <code>&lt;li&gt;&lt;a&gt;</code> content, then speeds up to a normal pace again.  This weirdness only happens on the expand but <em>not</em> on the collapse.  View code and oddness in action in <a href="http://plnkr.co/edit/6wqhJA?p=preview" rel="nofollow noreferrer">this plunk</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="app" ng-controller="theController"&gt;
      &lt;div id="main" class="col-md-12"&gt;
          &lt;div id="drawer" collapse-width="drawerIsCollapsed" expand-width="200"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Some link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Some link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Some link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Some link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="content" class="col-md-12"&gt;
              &lt;button type="button" ng-click="drawerIsCollapsed = !drawerIsCollapsed"&gt;Toggle&lt;/button&gt;
              &lt;h1&gt;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.&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="divSandvoxController.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>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.  </p>
  
  <p>Does anyone know why this is happening and how I can fix it so that the expand transition is smooth, like the collapse?</p>