CODEWITHSUNDEEP
javascriptjqueryangularjsng-animate
Okku
Okku

Reputation: 7819

Angular animate each item in array with different timeouts

I'm trying to convert an app that's coded using jQuery to one that's using Angular as well.

I've got a few arrays containing similar data in a variable called categories:

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

I display the data using ng-repeat:

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

And let the user switch selected category with the following navigation:

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

There needs to be an animation when the server sends new items to the arrays and when old items are removed. This was easy to achieve with 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()
    }
  }
});

Animations when adding/removing elements work great, as demonstrated in this fiddle: https://jsfiddle.net/ilpo/ukq7ehca/ . However, when switching between arrays, the animation is ugly compared to what I had previously achieved with jQuery: https://jsfiddle.net/ilpo/14qtm70z/1/ . Rather than each of the elements in the array sliding simultaneously, I'd like them to leave/enter one-by-one at 50ms intervals as seen in the second fiddle. Is this possible in Angular? Do I perhaps have to change the structure of the page to achieve it?

Furthermore, if you're going to suggest I switch from jQuery animations to CSS animations when using Angular... Please also show how to animate the height of the added elements from 0 to auto with an ease-in-out easing curve. Unlike in the Fiddles above, the data in the actual app may be multiple lines long. Otherwise, jQuery animation solutions only, please :)

Upvotes: 1

Views: 416

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

You can try with two thing :

1 - ng-class on your element to animate

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

2 - in your controller you can set the interval for each boolean

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

Upvotes: 0

Related Questions