angularjs - ng-animate using javascript with angular version 1.2.0

Question

I have this HTML:

<div ng-repeat="item in items"  class="fade">
    {{item}}
</div>

and JS:

app.animation('fade', function() {
    return {
        setup : function(element) {
            alert("abc");
            element.css({'opacity': 0}); 
        },
        enter : function(element, done, memo) {
            alert("def");
            element.animate({'opacity': 1}, function() {
                done(); 
            });
        }
    };
});

Throws error:

Error: [$injector:modulerr] Failed to instantiate module HR due to: 
[$animate:notcsel] Expecting class selector starting with '.' got 'fade'.

I can get rid of the error by doing app.animation('.fade', function() { but then the alerts dont fire.

Anyone knows what is happening? Thanks in advance for your help.

Answer 1

Sorry if I'm a little late, but I think i found the solution.

The name needs to be .fade as the error states, like this:

app.animation('.fade', function() {
    return {
        setup : function(element) {
            alert("abc");
            element.css({'opacity': 0}); 
        },
        enter : function(element, done, memo) {
            alert("def");
            element.animate({'opacity': 1}, function() {
                done(); 
            });
        }
    };
});

See more here under javascript animations

Answer 2

Setup is not support in animation function in angular version 1.2.0

Try with below code:

  app.animation('fade', function() {
        return {

            enter : function(element, done, memo) {
                alert("def");
                element.animate({'opacity': 1}, function() {
                    done(); 
                });
            }
        };
    });

Below is the working example:

Working Example of Javascript Animation in Angular js 1.2.0