ngAnimate 不在 Ionic V1 应用程序中添加 ng-enter 类答案

【问题标题】：ngAnimate not adding ng-enter classes in Ionic V1 appngAnimate 不在 Ionic V1 应用程序中添加 ng-enter 类
【发布时间】：2017-06-07 13:56:59
【问题描述】：

我有一个 ionic v1 应用。当元素通过ng-repeat 添加到视图时，我想向它添加一个基本动画。阅读文档，该元素应该有一个 ng-enter 类，我可以使用它来添加 CSS 动画，但它没有。

ngAnimate 包含在 Ionic 中。我正在加载模块：

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。

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

我错过了什么？谢谢。

【问题讨论】：

标签： angularjs ionic-framework ng-animate

【解决方案1】：

这里是如何将 ngAnimate 与 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;
}

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

.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;
}

演示

【讨论】：

感谢您的回复，但您没有解决我的问题，ngAnimate 类未应用于我的元素。例如，应该有ng-enter 的元素没有。