How to make simple animation using ngAnimate

Question

I am not able to understand how the ngAnimate works exactly. here is my doubt.

1) ngAnimate - only works on directives?

2) how to make ng-animate work without the directive

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

Because i see all the animation examples only with directives.

I have a small demo here, any one help me to animation both without directive and with directive approach to simply adding a class name as `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 to update

Answer 1

I am not able to understand how the ngAnimate works exactly. here is my doubt.

ngAnimate is a module that provides support for animations in angular apps. There are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. For CSS based animations, angularjs adds a class ng-enter/ng-leave whenever an element is shown/removed from 'view'. You simply need to play with these classes to make the animation work!

Prerequisite:

• You would need to add the library for angular-animate

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

• and include ngAnimate as the dependency in your myApp module.

  var myApp = angular.module('myApp', ['ngAnimate']);
  

1) ngAnimate - only works on directives?

Yes. You cannot use ngAnimate without directive.

According to documentation, following directives are "animation aware":

• ngRepeat, ngView, ngInclude, ngSwitch, ngIf, ngClass,
• ngShow, ngHide, ngModel, ngMessages and ngMessage

2) how to make ng-animate work without the directive

You cannot!. Remember, even ng-click is a directive

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

Yes, You can add a callback after the animation is complete using the $animate service(which would usually be done in a custom directive) and use $animate.leave(element, [options]);

Have a look at this example for triggering events after the animation ends.

Finally, here is the updated demo you mentioned in question.

You may toggle a flag to true/false with each click on <h1> and 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 to handle fade-effect with 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 it helps!

Answer 2

<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
    <h1 ng-click="animate()">Click ME</h1>
    <h2 ng-if="clicked" class="animate-if">Let me Fade</h2>

</div>

I added a variable named clicked which is set to true or false to animate the Let me Fade Text

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

myApp.controller('count', function($scope) {
     $scope.clicked=false;   
    $scope.animate = function () {
    $scope.clicked=!$scope.clicked;     
    }
});

In this JS file upon clicking the click me button the variable clicked is set to true or false .

**

 h2.fade {
   opacity : 0;
   transition: opacity 1s ease-in-out;
}
.animate-enter, .animate-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
} 
.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}

**

Here in the css file i added css for the class animate which acts upon clicked variable if the variable is true it goes for animate-enter-active otherwise it goes for leave-active