angularjs - How to make simple animation using ngAnimate -

i not able understand how nganimate works exactly. here doubt.

1) nganimate - works on directives?

2) how make ng-animate work without directive

3) of above way, how add call after animation complete?

because see animation examples directives.

i have small demo here, 1 me animation both without directive , directive approach adding class name `fade'?

my code:

<div class="container" ng-app="myapp">     <div class="content" ng-controller="count">         <h1 ng-click="animate()">click me</h1>         <h2>let me fade</h2>     </div> </div> <div class="container" ng-app="myapp">     <div class="content" ng-controller="count">         <h1 ng-click="animate()">click me</h1>         <h2>let me fade</h2>     </div> </div> 

demo update

i not able understand how nganimate works exactly. here doubt.

nganimate module provides support animations in angular apps. there 2 ways make use of animations when nganimate used: using css , javascript. for css based animations, angularjs adds class ng-enter/ng-leave whenever element shown/removed 'view'. need play these classes make animation work!

prerequisite:

• you need add library angular-animate

  <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"> </script> 

• and include nganimate dependency in myapp module.

  var myapp = angular.module('myapp', ['nganimate']); 

1) nganimate - works on directives?

yes. cannot use nganimate without directive.

according documentation, following directives "animation aware":

• ngrepeat, ngview, nginclude, ngswitch, ngif, ngclass,
• ngshow, nghide, ngmodel, ngmessages , ngmessage

2) how make ng-animate work without directive

you cannot!. remember, ng-click directive

3) of above way, how add call after animation complete?

yes, can add callback after animation complete using $animate service(which done in custom directive) , use $animate.leave(element, [options]);

have @ example triggering events after animation ends.

finally, here updated demo mentioned in question.

you may toggle flag true/false each click on <h1> , make content inside <h2> hide/show based on flag.

  <div class="container" ng-app="myapp">       <div class="content" ng-controller="count">           <h1 ng-click="animate()">click me</h1>           <h2 ng-if="flag" class="fade">let me fade</h2>       </div>   </div> 

also, you'd need handle fade-effect css

.fade.ng-enter {   transition:0.5s linear all;   opacity:0; } .fade.ng-enter.ng-enter-active {   opacity:1; }     .fade.ng-leave {   transition:0.5s linear all;   opacity:1; } .fade.ng-leave.ng-leave-active {   opacity:0; } 

hope helps!