Angular ng-animate using javascript not working as expected

Question

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

Roy Daniels · Accepted Answer · 2013-04-10 15:39:22Z

2

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

answered Apr 10, 2013 at 15:39

Roy Daniels

6,3092 gold badges30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bhavesh Over a year ago

thanks a ton.. there is another issue if u could help.. it seems that element.css('height') doesnt work if I remove the jquery... line 11,12 [fiddle.. ] (jsfiddle.net/LFFav/14) .. any idea why..?

Roy Daniels Over a year ago

If you inspect the DOM you'll see 2 things: 1) The height for your 1st ng-switch DIV is 0, but for the 2nd it's 20px. And 2) when the the CSS animation runs for a brief moment both the true and false DIVs are shown. In the JS animator that never happens. So I believe the error lies somewhere in one (or both) of those inconsistencies.

Jason Slocomb Over a year ago

There is a nice in depth article here covering all the new animation hooks in 1.1.4 here: yearofmoo.com/2013/04/animation-in-angularjs.html

Collectives™ on Stack Overflow

Angular ng-animate using javascript not working as expected

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related