Question

我对Angular - ngAnimate - Animate.css组合有问题（使用ngAnimate作为单独的模块，而不是旧版本）。

所以我有一个实际上是一个表的列表，每个tr都用ng-repeat重复。列表可以修改，它是一个来宾列表，我有一个按钮，只是添加一个新的对象（客人）到显示相同的ng-repeat的模型。对于添加到列表中的每个，我使用此CSS规则使其淡入列表：

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

显示动画，但问题是它首先在列表中显示，在非常短的时间内（大约100毫秒）完全可见，然后它开始动画 - ＆gt;它隐藏然后开始淡入。当然，它不应该首先显示，然后淡入，它应该淡入，而根本不可见。

我是否缺少CSS规则才能正常工作？现在我只使用ng-enter。

谢谢！

编辑：这是重复客人的HTML：

<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>

Answer 1

您应该根据$ animate使用的类隐藏和显示其他CSS：

.ng-enter,
.ng-leave.ng-leave-active {
    opacity:0;
 }

.ng-leave,
.ng-enter.ng-enter-active {
     opacity:1;
}

Answer 2

我认为您的问题与动画无关，但与角度开始更新页面之前的时间段有关。

您应该在元素中添加ng-cloak。（我看不到HTML。）

<div ng-cloak>
..list here..
</div>

https://docs.angularjs.org/api/ng/directive/ngCloak

Angular - ngAnimate - Animate.css - 项目首先显示，然后动画开始

2 个答案: