Javascript 角度设置数组中具有不同超时的每个项目的动画

我正在尝试将使用jQuery编码的应用程序转换为使用Angular的应用程序

我有几个数组，在一个名为

categories

的变量中包含类似的数据：

.controller('AppController', function($scope,$timeout){
  var self=this;
  self.categories=[[],[],[]];
  self.selected=0;
  setInterval(getNewItems,500);
});

我使用

ng repeat

显示数据：

<div id="numbers">
  <div class="slide" ng-repeat="number in app.categories[app.selected]">{{number}}</div>
</div>

添加/删除元素时的动画效果非常好，如本小提琴所示：。但是，当在数组之间切换时，与我之前使用jQuery实现的效果相比，动画效果很差。与阵列中的每个元素同时滑动不同，我希望它们以50毫秒的间隔一个一个地离开/进入，如第二把小提琴中所示这在Angular中可能吗？我是否需要更改页面结构来实现它

---

此外，如果您打算建议我在使用角度时从jQuery动画切换到CSS动画。。。还请演示如何使用

缓进-缓出

缓和曲线将添加元素的

高度

从

0

设置为

auto

。与上面的提琴不同，实际应用程序中的数据可能有多行。否则，jQuery动画解决方案仅适用于，请：）

您可以尝试两件事：

1-在元素上设置ng类以设置动画

 <myElement ng-class="{myanimatedclass : myCTRL.myboolean1}"></my-element>
 <myElement ng-class="{myanimatedclass : myCTRL.myboolean2}"></my-element> 

---

您可以尝试两件事：

1-在元素上设置ng类以设置动画

 <myElement ng-class="{myanimatedclass : myCTRL.myboolean1}"></my-element>
 <myElement ng-class="{myanimatedclass : myCTRL.myboolean2}"></my-element> 

---

在我看来，jQuery对于动画和动画插件来说要好得多。我认为angular试图覆盖动画，但它永远无法覆盖可用的jQuery插件的绝对规模。我认为工具法则有时适用于angularsjs：。依我看，jQuery对于动画和动画插件来说要好得多。我认为angular试图覆盖动画，但它永远无法覆盖可用的jQuery插件的绝对规模。我认为仪器定律有时适用于angularsjs：。我不确定我是否理解您的解决方案试图做什么，但它似乎只是在控制器初始化后开始反复将相同的布尔值设置为

true

。不知道这有什么用。不抱歉，是两个布尔值。事实上，使用ng类函数，当布尔值变为true时，您可以播放动画。因此，如果有两个元素要设置动画，可以在其上设置两个布尔值。在控制器中，在设置每个元素的动画之前，您可以选择持续时间。我不确定我是否理解您的解决方案试图执行的操作，但它似乎只是在控制器初始化后开始反复将相同的布尔值设置为

true

。不知道这有什么用。不抱歉，是两个布尔值。事实上，使用ng类函数，当布尔值变为true时，您可以播放动画。因此，如果有两个元素要设置动画，可以在其上设置两个布尔值。在控制器中，您可以在设置每个元素的动画之前选择持续时间

 <myElement ng-class="{myanimatedclass : myCTRL.myboolean1}"></my-element>
 <myElement ng-class="{myanimatedclass : myCTRL.myboolean2}"></my-element> 

function myController() { 
  vm = this;
  vm.myboolean1 = false;
  vm.myboolean2 = false;

function boolean1totru() {
   vm.myboolean1 = true;
  }

  function boolean2totru() {
   vm.myboolean2 = true;
  }

  function init() {
    setInterval(boolean1totrue,500);
    setInterval(boolean2totrue,1000);
  }
}