title: Angular ngShow sidebar sliding animation issue
body: <p>I'm trying to animate a toggle-able sidebar so that it slides open and closed, and I can't seem to get the animations to work whatever I do. I think I'm getting confused with how I'm supposed to apply animations to ngShow/ngHide elements.</p>
  
  <p>I've included an example here: <a href="https://jsfiddle.net/chiggerchug/m6ahk463/62/" rel="nofollow noreferrer">https://jsfiddle.net/chiggerchug/m6ahk463/62/</a></p>
  
  <p><strong>EDIT:</strong> Link updated, menu now pauses before closing, but no animation is applied.</p>
  
  <p>Here's an example of my css which is applied to the element that is being toggled:</p>
  
  <pre><code>  .animate-show-hide.ng-hide {
      -moz-transition: left 0.5s ease;
      transition: left 0.5s ease;
    }
  
    .animate-show-hide.ng-hide-remove {
      -moz-transition: left 0.5s ease;
      transition: left 0.5s ease;
    }
  </code></pre>
  
  <p>Any help on this issue would be greatly appreciated, Thanks.</p>