Animating angular ng-class with jQuery. Modified from 'Learning AngularJS Animations', chapter 4

<html ng-app="myApp">
<head>
    <title>AngularJS JavaScript animations - ngClass</title>
</head>
<body ng-controller="MainCtrl as mc">

<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<style>
    .greyBG {
        background-color: lightgray;
        padding: 10px;
        margin-top: 10px;
    }

    .wrapper {
        margin-left: 10px;
    }
</style>

<div class="wrapper">
    <h2>ngClass JavaScript Animation</h2>

    <button ng-click="mc.doToggle()">Toggle ngClass animation</button>
    <form ng-repeat="item in mc.transitions">
        <input type="radio" ng-model="mc.transition" ng-value="item" ng-change="mc.transition = item"> {{item}}<br/>
    </form>
    <div>Current choice:'{{mc.transition}}', current class = '{{mc.getToggle()}}'</div>
    <div ng-class="mc.getToggle()" class="firstJsAnimation greyBG">
        This element has class 'ngClassAnimationSample' and the ngClass directive is declared as
        ng-class="{{mc.getToggle()}}"
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="jsAnimationNgClass.js"></script>
<script>
    var mapp = angular.module('myApp', ['animodule']);
    mapp.controller('MainCtrl', [function() {
        var self = this;
        self.toggleClass = false;
        self.transitions = ['slideClass', 'hideClass'];
        self.transition = self.transitions[0];

        self.doToggle = function() {
            self.toggleClass = !self.toggleClass;
        };
        self.getToggle = function() {
            if(self.toggleClass) {
                return self.transition;
            }
            return '';
        }
    }]);
</script>
</body>
</html>

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

/**
 * @name firstJsAnimation
 * @desc The first sample animation function
 */
app.animation(".firstJsAnimation", [
  function () {

    /**
     * @name addClassAnimation
     * @desc The animation function called when a class is removed from the element
     * @param element - The element that will have the class removed
     * @param className - The name of the class that will be removed from the element
     * @param done - Callback function, it must be called to finish the animation
     */
    var addClassAnimation = function(element, className, done) {
      //Animate to slide up and then call done function
      if (className === 'slideClass') {
        jQuery(element).slideUp(600, done);
      } else if (className === 'hideClass') {
        jQuery(element).hide(600, done);
      } else {
        return;
      }

      // Here is the optional return function that treats completed or cancelled animations
      return function(isCancelled) {
        if (isCancelled) {
          element.stop();
        }
      };
    };

    /**
     * @name removeClassAnimation
     * @desc The animation function called when a class is removed from the element
     * @param element - The element that will have the class removed
     * @param className - The name of the class that will be removed from the element
     * @param done - Callback function, it must be called to finish the animation
     */
    var removeClassAnimation = function(element, className, done) {
      //Animate to slide down and then call done function
      if (className === 'slideClass') {
        jQuery(element).slideDown(600, done);
      } else if (className === 'hideClass') {
        jQuery(element).show(600, done);
      } else {
        return;
      }

      // Here is the optional return function that treats completed or cancelled animations
      return function(isCancelled) {
        if (isCancelled) {
          element.stop();
        }
      };
    };

    return {
      addClass: addClassAnimation,
      removeClass: removeClassAnimation
    };

  }
]);