Что такое ng-hide-add, ng-hide-active

Я оживляю div. Он имеет следующее определение:

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

У меня определено следующее css:

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;
}

Это взято из данного руководства. Работает анимация. Но:

  • Зачем нужны эти классы .ng-hide-add и .ng-hide-remove?
  • Почему я не вижу их добавленных в div-классы?
  • Почему существуют классы ng-hide-add-active и ng-hide-remove-active?

  • Почему нет перехода, когда div становится видимым, хотя я добавил следующее правило css:

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

UPDATE

  • Как видно из таблицы, представленной в учебном руководстве Google, эти классы добавляются в триггер animation frame (this performs a reflow). Правильно ли я понимаю? Почему там упоминается animation frame?
  • Я пытался увеличить переходный период, но он не добавлял классы. Я не видел добавленные классы ng-hide-add-active и ng-hide-remove-active.
  • Как я понимаю из таблицы, это классы, которые вызывают переход?

Update1
Я изучил исходный код Angular и нашел следующее для директивы ng-hide:

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');
    });
  };
}];

Как я понимаю, класс ng-hide добавляется через службу анимации. Но что произойдет, если я не использую анимацию, а услуга $animate недоступна? Как Angular будет обрабатывать эту ситуацию с учетом приведенного выше кода и как он собирается добавить класс ng-hide? Или это $animate.addClass() просто добавляет обратный вызов к событию addClass?

enter image description here

Ответы

Ответ 1

Поместите свой переход CSS на 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;
}

Аналогично, для ng-hide-add и ng-hide-add-active:

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


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