CODEWITHSUNDEEP
javascriptangularjs
Krab
Krab

Reputation: 6756

AngularJS - animation of new elements when model changed

How to run animation of new elements in ng-repeat when model changed? New elements are automatically created by angular when model changed and it seems to me there is no way how to be informed about it (i don't found any event in documentation). I solved it now thanks to setTimeout(O, runAnim) when link function of my custom directive is executed (it's executed when new element is created, but before is added to DOM), because i am expecting that timer function is executed after new element is added to DOM (so it is rendered), but i am not sure if this will work in each browser and in each situation, because of angular internals. Is there any better way how to get this behavior?

EDI1: and this will not work when elements are removed, when model changed (if i want to fadeOut them)

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8" />
    <title>Angular js</title>
    <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/Controllers.js"></script>
</head>
<body ng-controller="MyController">
      <ul>
          <li ng-repeat="user in users" ng-bind="user" my-anim></li>
      </ul>
</body>
</html>

Controllers.js

function MyController ($scope) {
    $scope.users = ['foo', 'bar'];
}

app.js

angular.module("MyApp", [])

    .directive('myAnim', function () {
        return function (scope, elem, attr) {
            elem.hide();
            setTimeout(function () {
                elem.fadeIn();
            }, 0);
        }
    });

Upvotes: 0

Views: 2364

Answers (3)

lex82
lex82

Reputation: 11317

You could use a CSS3 animation instead of jQuery. They are faster and work in all modern browsers. A simple fade-in should be easy to achieve by animating the opacity or the elements dimensions. It will start when the element is added to the DOM. If you set the animation-iteration-count to 1 it will stop after the first iteration.

There are tons of tutorials for CSS3 animations on the web. Maybe you want to start here: http://www.w3schools.com/css/css3_animations.asp

If you are more interested in the topic, this is a good article: http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

Fading out seems to be more difficult in your case since you cannot animate an object that has been removed from the DOM. Neither with jQuery nor with CSS3. The only way I see is to update your array in two steps. First mark the elements that will be removed, for instance with a certain class that triggers an animation (or with jQuery). And then actually remove them in a second step.

Upvotes: 1

darwinbaisa
darwinbaisa

Reputation: 688

This may show some pointers till Angular 1.2 gets stable. Simple Example

Upvotes: 0

Karen Zilles
Karen Zilles

Reputation: 7671

This has been added to one of the experimental releases of angular. See this article to see how it works:

http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

Upvotes: 2

Related Questions