Question

我在我的应用中使用了ng-animate。当我的聊天应用程序打开或重新加载带有消息的列表时，会加载一个漂亮的淡入淡出动画。

这是我的代码：

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

这是我的css样式：

/* 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;
}

因此加载动画ng-repeat工作正常，animate-repeat类提供的Read Marker在进入或离开时也会动画化。

所以看起来它正在工作但是当新消息被添加到ng-repeat列表时，新消息不会被动画化。这里出了什么问题？

Answer 1

显然这个问题是一个限制，如果您在track by $index中使用ng-repeat，则动画无效。

另见

ng-repeat输入动画不起作用（仅当新项目添加到ng-repeat时）

1 个答案: