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

修改

点击“新消息”后，我看到并非所有通知都是动画的。也许它与ng-repeat-start和ng-repeat-end？

有关

Answer 1

如果理解正确，只需更改：

$scope.messages.unshift(message);

到此：

$scope.messages.push(message);

Answer 2

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

使用Angular varible $ first ，只需在HTML中使用ng-class指令为第一个元素添加CSS类。在这个例子中，class＆＃34; first＆＃34;将仅添加到ng-repeat中的第一个元素：

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

然后将动画规则应用于＆＃34;第一个＆＃34; CSS类

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

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

角度ng重复动画一次

2 个答案: