Я оживляю 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
?