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

Angular - ngAnimate - Animate.Item first shows and then the animation starts

本文关键字：然后 开始 显示 动画 ngAnimate Animate 项目 Angular      更新时间：2023-09-26

我有一个问题，Angular - ngAnimate - animation .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毫秒)完全可见，然后它开始动画->它隐藏，然后开始淡入。当然，它不应该先显示，然后淡出，它应该在完全不可见的时候淡出。

我错过了一个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>

你应该有额外的CSS来隐藏和显示基于$animate使用的类:

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

我认为你的问题与动画无关，而是与angular开始更新页面之前的时间周期有关。

你应该在元素中添加ng-cloak。(我看不到html)

<div ng-cloak>
..list here..
</div>
https://docs.angularjs.org/api/ng/directive/ngCloak

相关文章：