Angularjs ng repeat输入动画不工作(仅当新项目添加到ng repeat时)
我正在我的应用程序中使用ng animate。 当我的聊天应用打开或重新加载带有消息的列表时,会加载一个漂亮的淡入动画 这是我的代码:Angularjs ng repeat输入动画不工作(仅当新项目添加到ng repeat时),angularjs,ionic,ng-repeat,ng-animate,Angularjs,Ionic,Ng Repeat,Ng Animate,我正在我的应用程序中使用ng animate。 当我的聊天应用打开或重新加载带有消息的列表时,会加载一个漂亮的淡入动画 这是我的代码: <ion-content class="chatBox" delegate-handle="chatBox"> <ion-list> <ion-item class="animate-repeat" ng-repeat="message in messages | orderBy: '-pn_apns.ap
<ion-content class="chatBox" delegate-handle="chatBox">
<ion-list>
<ion-item class="animate-repeat" ng-repeat="message in messages | orderBy: '-pn_apns.aps.timetoken' | unique: 'pn_apns.aps.timetoken' track by $index">
<div class="chatMessageTitle" ng-if="message.pn_apns.aps.userName != null">
<h1 on-tap="reply(message.pn_apns.aps.userName)" class="nameTag" >{{ message.pn_apns.aps.userName }}</h1> <time-ago class="time" from-time='{{ message.pn_apns.aps.currentDate }}' ng-class="{'last': $last}"></time-ago>
</div>
<div class="chatMessage" timetoken="{{ message.pn_apns.aps.timetoken }}" ng-class="{'firstMessage': $first, 'lastMessage': $last}">
<div class="chatText" ng-bind-html="message.pn_apns.aps.chatMessage" ng-if="message.pn_apns.aps.chatMessage != null || message.pn_apns.aps.chatMessage.length < 1" ng-class="{'zeroHeight': message.pn_apns.aps.chatMessage.length < 1}"></div>
<!--Youtube-->
<div class="video-container" ng-if="message.pn_apns.aps.youtubeVideo != null">
<iframe width="420" height="345" ng-src="{{ message.pn_apns.aps.youtubeVideo }}" frameborder="0" sandbox="allow-scripts allow-top-navigation allow-same-origin" allowfullscreen></iframe>
</div>
<!--Images-->
<img ng-src="{{ message.pn_apns.aps.externalImage }}" ng-if="message.pn_apns.aps.externalImage != null"/>
<!--Read Marker-->
<div class="readMarker animate-repeat" ng-if="message.pn_apns.aps.timetoken == lastReadPosition && $index > 5">This was your last read position</div>
</div>
</ion-item>
</ion-list>
</ion-content>
因此,animate ng repeat on load正在工作,并且随animate repeat类提供的读取标记在其进入或离开时也会设置动画
因此,它看起来像是在工作,但当一条新消息被添加到ng repeat列表时,新消息不会被设置动画。这里出了什么问题?显然,这个问题是一个限制,如果在
ng repeat
中使用track by$index
,动画将无法工作
另见
ng repeat
中使用track by$index
,动画将无法工作
另见
/* ng-repeat animation styling */
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
}