0

I'm currently developing an app with angularJS and I'm kinda new to it. I made a basic animation function in jQuery a while ago, which im now trying to implement in a "angularJS way". Not sure how to do this, and what the best practice is.

Basically, i'm receiving an object through an ajax call and then creating elements in the view with ng-repeat. The elements have opacity set to 0, which i'm changing to 1 with an animation.

The function for the animation in jQuery looks like this:

$(".box").each(function(i) {
  $(this).delay(i * 150).animate({
    'opacity': '1'
  }, 2000, 'easeOut');
});

With an extended jQuery easing "easeOut":

jQuery.extend(jQuery.easing, {
  easeOut: function(x, t, b, c, d) {
    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
  }
});

Provided the code in jsfiddle so you can see how it works: https://jsfiddle.net/o944mLsg/1/

I trieded to include the code in angularJS by using the "angular.element", but then it loads before angular actually created the DOM, so the animation has no effect. Then i wrapped it around a setTimeout function, then it works most of the time, but sometimes it doesn't by some reason.. just not very reliable.

So the question is, how is this done in a angular way without jQuery (unless its really needed) ?

qua1ity
  • 565
  • 2
  • 8
  • 27

1 Answers1

0

What you have provided works great and you should keep it that way. Read this link, What does AngularJS do better than jQuery?, and you'll have a better understanding of AngularJS and JQuery.

To be short, Angular is best at DOM manipulation for the scope of creating elements with data-binding. JQuery is best for DOM manipulation for the scope of animations and stylistic changes that cannot be done with pure CSS.

As for making sure your Jquery functions are not called until ng-repeat has finished look at this: ng-repeat finish event

Community
  • 1
  • 1
theblindprophet
  • 7,767
  • 5
  • 37
  • 55
  • Thanks for the information, i will look into it. Yeah, the function itself works accordingly, it's just when put in my angular code i run into problems like jQuery trying to run before the ng-repeat have rendered the elements. They just doesn't seem to "cooperate" very well. The code is in my controllers, which are linked with route and ng-view. – qua1ity Apr 01 '16 at 00:18
  • I have edited my answer to include your concern about jquery running before the DOM is loaded with `ng-repeat` – theblindprophet Apr 01 '16 at 01:22