Как я могу охарактеризовать классы CSS с помощью ngAnimate?

Question

В моем приложении я хочу показать индикацию загрузки во время загрузки. Я осуществил это успешно:

lyr.ui.directive('loading', ['$timeout', function($timeout) { 
    return function(scope, element, attr) { 
     element.addClass('content-loading'); 
     var unbind = scope.$watch(attr.loading, function(value) { 
      if (value) { 
       element.removeClass('content-loading'); 
       element.addClass('content-loaded'); 
       $timeout(function() { 
        element.removeClass('content-loaded'); 
       }, 250); 
       unbind(); 
      } 
     }); 
    }; 
}]); 

Plunker: http://plnkr.co/edit/L6opqA?p=preview

Однако, я думаю, что я дублируя много ngAnimate кода добавления и удаления классов, и в закодировав удаление content-loaded с использованием жестко запрограммированный тайм-аут.

Можно ли использовать мой пример для использования ngAnimate с меньшим количеством duplicated code?

Это сложно понять из-за того, что документация по ngAnimate не фокусируется на JS-запускаемых анимациях.

Небольшое примечание, которое не отображается в плункере: я должен отображать дочерние элементы во время загрузки, потому что этот элемент содержит плагин jQuery, который вызывает $.width, который возвращает 0 для элементов, которые не отображаются.

Answer 1

Я нашел another plunker, который показал мне, как это сделать.

Решение: http://plnkr.co/edit/bzIReo?p=preview

myApp.directive('loading', ['$animate', function($animate) { 
    return function(scope, element, attr) { 
     element.addClass('content-loading'); 
     var unbind = scope.$watch(attr.loading, function(value) { 
      if (value) { 
       $animate.removeClass(element, 'content-loading'); 
       unbind(); 
      } 
     }); 
    }; 
}]); 

CSS:

.content-loading { 
    background-image: url(data:image/gif;base64,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); 
    background-repeat: no-repeat; 
    background-position: 20px 10px; 
} 

.content-loading > * { 
    opacity: 0; 
} 

/* Class name generated by ngAnimate */ 
.content-loading-remove > * { 
    -webkit-transition: opacity 250ms linear; 
    -moz-transition: opacity 250ms linear; 
    transition: opacity 250ms linear; 
    opacity: 1; 
}