AngularJS animation from 1.1.5 to 1.5.1 slide in issues

Question

I'm trying to do a slide in animation when ng-show is invoked.

The element will slide in from the right.

If I'm using 1.1.5 , it works perfectly as show in this fiddle (https://jsfiddle.net/sbcjdqwk/1/)

I understand that ng-animate has been deprecated since 1.2 and I have made the necessary adjustments for 1.5.5.

.slide.ng-enter {
    position: relative;
    left: -100%;
}

.slide.ng-enter.ng-enter-active {
    transition: all 1s;
    left: 0;
}

.slide.ng-leave {
    position: relative;
    left: 0;
}

.slide.ng-leave.ng-leave-active {
    transition: all 1s;
    left: -100%;
} 

Somehow it's still not working. Could anyone please advise? Thanks!

Fiddle here: https://jsfiddle.net/xrp1h592/3/

Answer 1

.animate-show-hide.ng-hide-remove {
  left: 100%;
  position: relative;
}

.animate-show-hide.ng-hide-remove-active {
  left: 0;
}

.animate-show-hide.ng-hide-add {
  left: 0%;
  position: relative;
}

.animate-show-hide.ng-hide-add-active {
  left:100%;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: ease-in-out 300ms;
}

Using ng-hide-add and ng-hide-remove solves the issue. And using "ease-in-out" rather than "linear" makes it more smooth.

Plunkr link here: https://plnkr.co/edit/FeX0hG6nXnVz4h3H9oow?p=preview