ng-repeat + ng-animate + css3 transition

Question

I have a huge delay in ng-repeat on re-initialization of collection (elements are disappearing from DOM with delay) when I use ng-animation and css3 transition.

I have ng-repeat that create card directive on each iteration:

ng-repeat="card in cards track by $index" card

there is a some transition on root node of card directive:

.card {
        transition: transform 0.2s linear;
        transform: translateX(0);
}

the problem is appearing when cards collection is re-initialized $scope.cards = []

Do you have any idea how to work around this problem?

Answer 1

You should use transition on event not in the normal state of the element. I think the linear transition will happen if after .card is loaded you add second class .effect and put the transform in it.