Animation transitions behave differently for ng-hide-remove and ng-hide-add

Question

I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles.

I have successfully managed to have the div slide in from the left, however I can not get it to slide out (it simply dissappears after the specified delay). I have tried modifying several examples online to get the behavior I am after to no avail.

JSFiddle for anyone that wants to have a look https://jsfiddle.net/mquinlan/0wcrcwxe/5/

Answer 1

You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active.

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;

}

Updated Fiddle: https://jsfiddle.net/vsj62g5r/