添加重复项动画无法正常工作答案

【问题标题】：Add repeat-item animation not working properly添加重复项动画无法正常工作
【发布时间】：2015-06-25 04:50:09
【问题描述】：

参见this plunker，添加项目的动画只有在首先从列表中删除项目时才有效。如何解决这个问题？

css:

.repeat-item.ng-enter,
.repeat-item.ng-leave {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
  height: 0px;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity:1;
   height: 30px;
}
.repeat-item {

  background: green;
  margin-bottom: 5px;
  height: 30px;
}

html:

  <div ng-repeat="item in items " class="repeat-item">
    {{item}} <span class="delete" ng-click="remove($index)">delete</span>
  </div>
  <div ng-click="add($index)">add</div>

【问题讨论】：

无法在 Firefox 或 Safari 中重现，我可以在不删除项目的情况下看到添加动画。您使用的是哪个浏览器+版本？顺便说一句，您使用的 AngularJS 版本已经过时，1.4 是最新的。自 1.2 以来，已修复了许多动画错误。
哦，确实，我切换到 1.4.1，然后它完美运行。我正在使用 Chrome。谢谢！做出一个答案，我会接受:)

标签： css angularjs animation angularjs-ng-repeat css-animations

【解决方案1】：

Blaise 的评论确实是答案。我在使用 Chrome 时遇到问题。解决方案是从 Angular/AngularAnimate 的 1.2 切换到 1.4，然后它就完美运行了。

【讨论】：