what is ng-hide-add, ng-hide-active

Question

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?

Answer 1

Put your CSS transition on ng-hide-remove, ng-hide-remove-active:

div.ng-hide-remove {
    transition: 0.5s linear opacity;
    opacity: 0;
}


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

Similarly, for ng-hide-add and ng-hide-add-active:

div.ng-hide-add {
    transition: 0.5s linear opacity;
    opacity: 1;
}


div.ng-hide-add-active {
    opacity: 0;
}