title: Using animation to move panel left to right but keep a part of it, angular, animate
body: <p>I have this panel I want animate to fly in from left. When I close it I want it to slide in again but keep a bar so I can get it back out again.</p>
  
  <p><img src="https://i.stack.imgur.com/vWHnK.png" alt="enter image description here"></p>
  
  <p>This is my current markup </p>
  
  <pre><code>&lt;div class="simulation"&gt;
    &lt;div class="simulation-content"&gt;
      &lt;div class="simulation-main"&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="simulation-bar"&gt;
        &lt;div class="toggle-bar"&gt;
          &lt;a href&gt;&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
  
        &lt;/div&gt;
        &lt;div class="heading"&gt;
          &lt;h4&gt;SIMULATIONS&lt;/h4&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when it's closed I want the "SIMULATIONS"-bar still to be visible.</p>
  
  <p>I can't put a ng-show on the "simulations-class", cause then it hides everything. </p>
  
  <p>My css:</p>
  
  <pre><code>.simulation{
  
    height:600px;
    width:500px;
    border:1px solid #ccc;
    box-shadow: 8px 8px 7px #A5A5A5;
    background:#FFF;
  
    position:absolute;
    top:300px;
    z-index:100;
  
    .simulation-content{
      position:relative;
      height:100%;
      .simulation-main{
        //@extend .pull-left;
        height:100%;
        position:absolute;
        left:0;
        top:0;
  
      }
  
      .simulation-bar{
        @extend .pull-right;
        position:absolute;
        top:0;
        right:0;
        height:100%;
        width:50px;
  
        background: -webkit-linear-gradient(left, rgba(232,232,232,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
        border-left: 1px solid #CCC;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        padding: 0 8px;
        color: #777;
        .heading{
  
          position:relative;
          margin-top:310px;
          -webkit-transform: rotate(-90deg);
  
        }
      }
  
  
    }
  
  }
  </code></pre>
  
  <p>One solution could be to put the bar as a own directive, insert two of them and hide one when it's closed and show the other one when its opened. But I think it would be difficult to make a nice animation of this.</p>
  
  <p>Any ideas?</p>