javascript - Angular - ngAnimate - Animate.css - Item first shows and then the animation starts -
i have problem angular - nganimate - animate.css combination (using nganimate separate module, not old version).
so have list table , each tr repeat ng-repeat. list can modified, it's guests list, , have button adds new object (guest) model displayed same ng-repeat. each added list, use css rule make fade in list:
#ic-booking-details .ic-confirmed-guest-list tr.ng-enter { -webkit-animation: slideinleft 0.5s; animation: slideinleft 0.5s; }
the animation shown, problem first shows in list, visible short period (about 100ms), , starts animating -> hides , starts fade in. ofcourse, shouldn't show first, , fade in, should fade in while not visible @ all.
am missing css rule work properly? right i'm using ng-enter.
thanks!
edit: html repeats 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>
you should have additional css hide , show based on classes $animate uses:
.ng-enter, .ng-leave.ng-leave-active { opacity:0; } .ng-leave, .ng-enter.ng-enter-active { opacity:1; }
Comments
Post a Comment