jquery - CSS3 - call back after animation done by adding class name -

how make call in angular call function after completing animation adding classname?

here code :

var myapp = angular.module('myapp', []); myapp.controller('count', function($scope) {     $scope.animate = function () {         $('h2').addclass('fade'); //adding animation 1s         //opcity done how put call back?         $scope.done = function () { //call after 1s..?             console.log('done');         }     } });  <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> 

jsfiddle

since tagged jquery, how using jquery $(selector).fadeout(speed,easing,callback) speed can "fast" or "slow" or define milisec easing speed increment whether constant "linear" or faster @ end "swing" callback function, refer article

var myapp = angular.module('myapp', []);  myapp.controller('count', function($scope) {     $scope.animate = function () {         $scope.done = function () { //call after 1s..?             console.log('done');         }         $('h2').fadeout("slow","linear", $scope.done)     } }); 

here jsfiddle you

edit:

here angularjs approach jsfiddle you, isn't mine. learned here