Анимация новых строк ng-grid

Question

Как я могу оживить новую строку в ng-сетке?

Что я хотел бы, так это то, что когда новые данные поступают с сервера, они добавляются в начало сетки, и эта строка затем светится в течение нескольких секунд.

Я попытался добавить класс нг-анимировать в rowTemplate для сетки, но не увенчалась успехом:

$scope.gridOptions = { 
    data: 'myData', 
    rowTemplate: '<div style="height: 100%" class="reveal-animation"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div></div>' 
}; 

Где мой выявить-анимацию (поднятым прямо с нг-одушевленного документации) является:

.reveal-animation.ng-enter { 
-webkit-transition: 1s linear all; 
transition: 1s linear all; 
opacity: 0; 
} 

.reveal-animation.ng-enter.ng-enter-active { 

opacity: 1; 
} 

Но это не работает для сетки.

Есть ли способ сделать это?

Вот Plunker с моей попыткой http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview

Я добавил <ul> в нижней части, чтобы показать поведение, которое я хочу (и доказать, что нг-одушевленный работают).

Answer 1

Правильный способ оживить это путем связывания анимации .ngRow т.е.

/* 
The animate class is apart of the element and the ng-enter class 
is attached to the element once the enter animation event is triggered 
*/ 
.ngRow.ng-enter { 
-webkit-transition: 1s linear all; /* Safari/Chrome */ 
transition: 1s linear all; /* All other modern browsers and IE10+ */ 

/* The animation preparation code */ 
opacity: 0; 
} 

/* 
Keep in mind that you want to combine both CSS 
classes together to avoid any CSS-specificity 
conflicts 
*/ 
.ngRow.ng-enter.ng-enter-active { 
/* The animation code itself */ 
opacity: 1; 
} 

Проблема заключается в том, что вы используете unshift раздвинуть значений в начало массива, но нг-сетка еще функции, добавляя строку в нижней части сетки и перебирая все строки таким образом, чтобы непреднамеренно первый элемент в сетке был тем, который получает анимацию.

Вот plunker для моей вилки, которая имеет выше Css работу - возможно, вы можете взять его на шаг дальше: http://plnkr.co/edit/gNSM4FRMFcTtQtT6EU7b?p=preview

как мысль: может быть, вы можете иметь элементы идут в наборе данных как обычный толчок и переупорядочить сетку тем, что удерживает их в обратном порядке. Это может обмануть сетку в анимацию новейшей вещи, но сохранить новейшую вещь в верхней части сетки.

Если честно, я обнаружил, что просто создание собственной сетки и привязка ng-repeat к tr было намного проще, чем пытаться суетиться с другими сетчатыми системами, особенно такими, как ng-grid, где вы не получаете для управления поведением.