angularjsng-animate

AngularJS animation from 1.1.5 to 1.5.1 slide in issues


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/


Solution

  • .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