I'm animating a div. It has the following definition:

<div ng-show=showTranslations ng-swipe-right=showTranslationsBlock=false>...</div>

I have the following css defined:

div.ng-hide {

    transition: 0.5s linear opacity;

    opacity: 0;

}



div.ng-hide-add, 

div.ng-hide-remove {

    /* this needs to be here to make it visible during the animation

       since the .ng-hide class is already on the element rendering

       it as hidden. */

    display:block!important;

}

This is taken from this tutorial. The animation works. But:

1. Why do I need these classes .ng-hide-add and .ng-hide-remove?


2. Why I don't see them added to div's classes?


3. Why there are also classes ng-hide-add-active and ng-hide-remove-active?



4. Why there is no transition when the div becomes visible although I've added the following css rule:

   
   
   

   div.ng-hide-remove {
opacity: 1;
}

UPDATE

1. As I can see from the table provided by google's tutorial these classes are added to trigger animation frame (this performs a reflow). Is my understanding correct? Why is animation frame is mentioned there?


2. I tried to increase the transition period but it didn't add the classes. I didn't see the classes ng-hide-add-active and ng-hide-remove-active added either.


3. As I understand from the table these are the classes that trigger transition?

UPDATE1

I've explored the Angular's source code and found the following for the ng-hide directive:

var ngHideDirective = ['$animate', function($animate) {

  return function(scope, element, attr) {

    scope.$watch(attr.ngHide, function ngHideWatchAction(value){

      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');

    });

  };

}];

As I understand the ng-hide class is added through animation service. But what happens if I don't use animations and $animate service is not available? How Angular is going to handle this situation given the code above and how it is going to add ng-hide class? Or is this $animate.addClass() simply adds a callback to addClass event?