无法使用 ng-repeat 获得动画

Posted 2023-05-08

【中文标题】无法使用 ng-repeat 获得动画

【英文标题】：Can't get animation with ng-repeat working

【发布时间】：2016-04-12 08:31:50

【问题描述】：

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

我去了here 和here 之类的相关帖子，但我的代码无法正常工作。这是它的jsFiddle。我发现原因是我的项目没有得到.ng-enter 类分配给它，但我不知道为什么我不能这样做。任何帮助表示赞赏。

谢谢。

【问题讨论】：

嗨 blenzcoffee，你期待什么动画？向左滑动？据我所见，您似乎正在替换内容，并且您正在制作动画的类在单击下一个/上一个时永远不会应用于元素。我错过了什么吗？

@JannikRasmussen 是的。它应该更改为 left:500px。但目前，它不做任何动画（我认为这是因为我的项目没有分配给它的 ng-enter 类）

@JannikRasmussen 是的，我刚刚在发表评论之前更新了我的问题。我认为问题在于我正在替换内容，这就是为什么 ng-enter 永远不会被应用的原因。那么，换句话说，我不能这样做吗？我正在尝试实现“轮播”效果

您的容器具有固定宽度是否可以接受？你可以有一个轮播效果，但你必须让动画先发生 - 然后替换内容。或者更确切地说，将动画后的第一个/最后一个 div 替换为下一个。

【参考方案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 中的左/右绝对位置。

【讨论】：

嗨，过滤东西不是更好吗？这样我们就不需要渲染所有东西以防万一我们有很多项目（例如 1000 个），所以从技术上讲它对性能更好？

在这种情况下，是的。我不确定你想要完成什么。