2015-07-28 3 views
3

У меня есть этот случай, когда я хочу, чтобы применить анимацию к объекту DOM с директивой ngHide:ngAnimate с ngHide не прибавляет «нг-прятки анимировать» класс Крюк

http://plnkr.co/edit/r4i7WbCepl2w9Svv0YHn?p=preview

В этом примере, у меня есть этот JSON массив объектов:

$scope.items = [ 
    {"key": 1, "values": []}, 
    {"key": 2, "values": [21, 22, 23]}, 
    {"key": 3, "values": [31, 32, 33, 34]} 
]; 

этот список привязан к <ul> элементу, который будет показывать ключи этого списка. При выборе элемента из них значения должны отображаться в другом <div> с id detailsList. который будет показан с использованием инструкции ng-show="selectedItem".

Анимация добавляется с использованием CSS: #detailsList.ng-hide, в соответствии с Angular documentation of ngAnimate.

При выборе/снятии выделения с первого элемента без значений анимация работает хорошо, но не с элементами со значениями.

При проверке деталейList-элемента я обнаружил, что класс hook: ng-hide-animate не добавляется во время анимации, как описано в документации.

Это ошибка или я пропустил sth ??

+0

Включили ли вы модуль ngAnimate в ваших зависимости приложений? angular.module ('appName', ['ngAnimate']) –

+0

@OriDrori, если вы нажмете на добавленный plunkr, вы увидите, что он включил его. – Guinn

+0

Мои бедные старые глаза пропустили плункер. –

ответ

0

Может быть, вы могли бы написать эту анимацию самостоятельно, специально для ngRepeat

app.animation('.animation-ng-repeat', function(){ 
    return { 
     leave : function(element, done) { 
      element.slideUp({complete: done}); 
     }, 
     enter : function(element, done) { 
      element.hide(); 
      setTimeout(function() { 
       element.slideDown({complete: done}); 
      }, 50); 
     } 
    } 
}); 

Тогда просто добавить его в нг-повтора как класс CSS.

Смежные вопросы