angularjs - Why doesn't this animate? -

http://plnkr.co/edit/k9w3avdjs3spqxuunhmf

i trying animate using $animate service animate.css library, can't seem right. blue block works because it's using animate.css class, how can make $animate.leave css class library. second, red block isn't entering , using .ng-enter classes. can explain why?

this works: http://plnkr.co/edit/lvijrards4nu9vpsaul3?p=preview

first, why example not working:

1. blue box animates because uses animate.css classes directly , doesn't use angular.js animation pipeline @ all.

2. red box doesn't animate, because animation set run on initial application start. angular prevents animations run on initial application setup prevent performance issues may caused lot of elements animate @ same time.

you need following changes enable red box animation:

$timeout(fn)  function fn() {   redblockelement = angular.element('<div class="red block"></div>')   $animate.enter(redblockelement, bodyelement).then(function() {     $animate.leave(redblockelement)   }) } 

i used $timeout service prevent dom enter 0 second, (technically) run after application start, animations going run.

but, need add transition rule .ng-enter itself, not body, add line css make animations work:

.block.ng-enter {   transition:0.5s linear all;   opacity: 0; } 

3. now able run our applications, didn't integrate animate.css angular.js yet. change animation related style this:

   .red.ng-enter { -webkit-animation: fadeinright 1s; animation: fadeinright 1s; } .red.ng-leave { -webkit-animation: fadeoutright 1s; animation: fadeoutright 1s; }

now using fade effect animate.css!

4. one last thing, enter animations work, exists not work. in angular 1.3.x need manually start digest cycle after animation complete, or ui changes not reflected until else triggers digest cycle. that's why need add `$rootscope.$apply();

in angular 1.4.x don't need that.

so final js:

$timeout(myfn); function myfn() {   bodyelement = angular.element(document.queryselector('body'))    redblockelement = angular.element('<div class="red block"></div>')   $animate.enter(redblockelement, bodyelement).then(function() {     $animate.leave(redblockelement);     $rootscope.$apply();   }) } 

final css:

.red.ng-enter {   -webkit-animation: fadeinright 1s;   animation: fadeinright 1s; } .red.ng-leave {   -webkit-animation: fadeoutright 1s;   animation: fadeoutright 1s; } 

plunkr: http://plnkr.co/edit/lvijrards4nu9vpsaul3?p=preview