CODEWITHSUNDEEP
javascriptangularjsng-animate
Bhavesh
Bhavesh

Reputation: 93

Angular ng-animate using javascript not working as expected

I tried to implement the demo example using JS but something went wrong with ng-switch ... I can see that new elements are being added in the dom, but ng-switch is not removing the unwanted DIVs. can you pls help ...

Here is the Fiddle...

var ngModule = angular.module('myApp', []);
ngModule.animation('js-wave-enter', function () {
return {
    setup: function (element) {
        //prepare the element for animation
        element.css({ 'position': 'absolute', 'left': '100%' });
    },
    start: function (element, done, memo) {
        //start the animation
        element.animate({ 'left': 0  }, function () {
            //call when the animation is complete
            done();
        });
    }
}
});

ngModule.animation('js-wave-leave', function () {
return {
    setup: function (element) {
        //prepare the element for animation
        element.css({'position': 'absolute',  'left': 0     });           
    },
    start: function (element, done, memo) {
        //start the animation
        element.animate({ 'left': '-100%'      }, function () {
            //call when the animation is complete
            done();
        });
    }
}
});

Upvotes: 3

Views: 2719

Answers (1)

Roy Daniels
Roy Daniels

Reputation: 6309

jQLite does not include the animate() method. You need to include jQuery proper before you include Angular and your code will work fine. So just add the following before the script tag that includes AngularJS:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Updated jsFiddle

Upvotes: 2

Related Questions