Angular of-repeat 动画一次

Question

我正在使用 ngAnimate 为 ng-repeat 中的条目设置动画。加载数据时，所有元素都按照我在 css:

中定义的方式进行动画处理

.chat-message.notice.ng-enter {
    -webkit-animation: rubberBand 1s;
    -moz-animation: rubberBand 1s;
    -ms-animation: rubberBand 1s;
    animation: rubberBand 1s;
}

当通知附加以下 html 时，此方法有效：

<ul>
    <li class="media chat-message pointer fade-animate"
        ng-repeat-start="message in guestbook.messages track by $index"
        ng-if="!message.bot">
        <!-- more html -->
    </li>
    <li class="chat-message notice" ng-repeat-end ng-if="message.bot">
        <div>
            <p class="text-center">
                {{ message.message }}
                <small>({{ message.date | amTimeAgo }})</small>
                <span class="close pull-right" ng-click="guestbook.remove(message)">&times;</span>
            </p>
        </div>
    </li>
</ul>

但是，当附加一条新消息时（在顶部），每个元素都会再次进行动画处理。有没有办法让元素只动画一次？当一个新消息附加到数组时，只有那个元素会动画？

JSFIDDLE

编辑

点击几次 'new message' 后，我发现并非所有通知都是动画的。也许它与 ng-repeat-start 和 ng-repeat-end?

有关

Answer 1

如果理解正确就改一下：

$scope.messages.unshift(message);

对此：

$scope.messages.push(message);

Answer 2

即使上面的答案解决了问题，我的解决方案在其他情况下可能会有帮助。修复非常简单。

使用 Angular 变量 $first 并使用 ng-class 指令为第一个元素添加 CSS class在你的 HTML 中。在此示例中，class "first" 将仅添加到 ng-repeat 中的第一个元素：

ng-class="{'first': $first===true}"

然后将动画规则应用于具有 "first" CSS class

的元素

.chat-message.notice.first.ng-enter {
    color:red !important;
    font-weight:bold;
    animation: rubberBand 1s;
}

已更新 JSFIDDLE： http://jsfiddle.net/t6x3a1zj/7/

Angular of-repeat 动画一次

Angular ng-repeat animate once

css

angularjs

animation

ng-animate