Question

我尝试将使用 jQuery 编码的应用转换为使用 Angular 的应用<\ n> / em>的。

我在一个名为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>

让用户使用以下导航切换所选类别：

<li ng-repeat="category in app.categories"> <a href="#" ng-click="app.selected=$index"> Array #{{$index}}: {{category.length}} items </a> </li>

当服务器向阵列发送新项目以及删除旧项目时，需要有动画。使用ngAnimate：
很容易实现这一点
.animation('.slide',function(){ return{ enter:function($e,done){ var height=$e.height(); $e.css({ left:$e.parent().width(), height:0 }).animate({ left:0, height:height },done); }, leave:function($e,done){ $e.animate({ left:-$e.parent().width(), height:0 }); }, move:function($e,done){ done() } } });

添加/删除元素时的动画效果很好，如此小提琴所示：https://jsfiddle.net/ilpo/ukq7ehca/。但是，当在数组之间切换时，与我之前使用jQuery实现的动画相比，动画是丑陋的：https://jsfiddle.net/ilpo/14qtm70z/1/。我不希望阵列中的每个元素同时滑动，我希望它们以50ms的间隔逐个离开/进入，如第二小提琴所示。 这在Angular中是否可行？我是否可能需要更改页面结构才能实现它？

此外，如果你建议我在使用 Angular 时从 jQuery动画切换到 CSS动画 ...请还会显示如何使用height缓动曲线为0到auto添加的元素的ease-in-out设置动画。与上面的小提琴不同，实际应用中的数据可能是多行长。否则，只有 jQuery动画解决方案，请：）

Answer 1

你可以尝试两件事：

1 - ng-class在您的元素上设置动画

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

2 - 在您的控制器中，您可以设置每个布尔值的间隔

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

Angular为数组中的每个项目添加不同的超时动画

1 个答案: