I have a problem with Angular - ngAnimate - Animate.css combination (using ngAnimate as a separate module, not the old version).

So I have a list which is actually a table and each tr is repeat with ng-repeat.
The list can be modified, it's a guests list, and I have a button which just adds a new object (guest) to the model that is displayed with the same ng-repeat. For each that is added to the list, I use this CSS rule to make it fade In to the list:

```
#ic-booking-details .ic-confirmed-guest-list tr.ng-enter {
   -webkit-animation: slideInLeft 0.5s;
   animation: slideInLeft 0.5s;
}

```

The animation is shown, but the problem is it first shows in the list, fully visible for a really short period (about 100ms), and then it starts animating -> it hides and then starts to fade in. Ofcourse, it shouldn't show first, and then fade In, it should fade In while not visible at all.

Am I missing a CSS rule for this to work properly? Right now I'm using only ng-enter.

Thanks!

EDIT: this is the HTML which repeats the guests:

```
<div  class="ic-confirmed-guest-list-holder">
   <table class="ic-confirmed-guest-list">
       <tr ng-repeat="(k,v) in guests.data">
           <td class="ic-guest-number">
                        <span ng-class="{error: ui.guests.errors[k].hasError}" ng-click="guests.swap(k)">Guest #{{k+1}}</span>
                        <span ng-hide="guests.selected != k" class="ic-current-guest"></span>
                    </td>
                    <td ng-click="guests.swap(k)" class="ic-guest-full-name">{{v.firstName}}
                        {{v.lastName}}
                    </td>
                    <td>
                        <span ng-hide="k==0" ng-click="removeGuest(k)" class="ic-remove-icon"></span>
                    </td>
                </tr>
            </table>
        </div>

```