css - ng-repeat 工作时无法获得动画

Question

我有一个简单的 ng-repeat 动画。我已经让我的模块依赖于 ngAnimate，并且我已经使用 .ng-enter 和 .ng-enter-active 等类在 CSS 中定义了我的转换。

我去了类似here的相关帖子和 here但我无法让我的代码工作。这是jsFiddle它的。我发现原因是我的元素没有分配 .ng-enter 类，但我不确定为什么我不能这样做。任何帮助表示赞赏。

谢谢。

Answer 1

这是可以实现的，但不能通过过滤数据的方式来实现。您当前的过滤器实际上并没有更新，ng-repeat 也没有渲染新元素，您只是简单地更改数据，不会重新渲染，也不会应用任何动画类。但是，如果更改您的过滤方式，使其实际使用过滤器，那么事情就会开始起作用。

http://jsfiddle.net/Lfmp8pdu/4/

angular
.module('App', ['ngAnimate'])
.controller('AppCtrl', [
  function() {
    var data = this;
    data.next = next;
    data.previous = previous;

    init();

    function init() {
      data.items = [
        {title: "One", page: 1},
        {title: "Two", page: 1},
        {title: "Three", page: 1},
        {title: "Four", page: 2},
        {title: "Five", page: 2},
        {title: "Six", page: 2},
        {title: "Seven", page: 3}
      ];

      data.page = 1;
    }

    function next() {
      data.page++;
    }

    function previous() {
      data.page--;
    }
  }
]);

以及修改后的 html 过滤器:

<div class="itemsContainer">
  <span ng-repeat="item in ctrl.items | filter:ctrl.page" class="animate">
    {{item.title}}
  </span>
</div>

就分页而言，这不是一个好方法。那里有更好的解决方案。另外，如果您希望这更像是一个真正的轮播，那么您可以尝试内联所有元素并向左/右移动整个元素 - 因此在这种情况下，所有内容都会始终被渲染，您不会使用过滤器，而是通过按钮更改 CSS 中的左/右绝对位置。