ngAnimate不在Ionic V1 app中添加ng-enter类

Question

我有一个离子v1应用程序。我希望在元素通过ng-repeat添加到视图时为元素添加基本动画。阅读文档时，元素应该有一个ng-enter类，我可以用它来添加CSS动画，但事实并非如此。

Ionic附带

ngAnimate。我正在加载模块：

angular.module('app', [
    'ionic',
    'ngAnimate',

以下是使用ng-repeat的视图代码：

<div class="entry" ng-repeat="message in messages | orderBy:'-id'">{{message}}
</div>

当我向$scope.messages动态添加消息时，它会像您期望的那样添加到视图中，但它不包含根据文档所应的ng-enter类。

我正在使用离子版1.3.3，Angular 1.5.3和ngAnimate 1.5.3。

这是一个显示问题的codepen：https://codepen.io/jamesjacobs/pen/YQyaZq

我错过了什么？感谢。

Answer 1

以下是如何使用ngAnimate with ionic

查看

中的

<ion-item class="chat-item item-remove-animate item-avatar item-icon-right" ... 

<强> CSS

如果您想将其与chat-item课程一起使用，请按以下方式使用

.chat-item.ng-enter {
    -webkit-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}

上面的代码将在一次动画整个列表。如果您想逐个动画每个项目，请使用延迟200毫秒的ng-enter-stagger

.chat-item.ng-enter-stagger {
  -webkit-animation-delay:200ms;
  animation-delay:200ms;

  /* override to make sure it's not inherited from other styles */
  -webkit-animation-duration:0;
  animation-duration:0;
}

演示