How to do jQuery animations in AngularJs, like fade out and fade out

Question

I am new to AngularJs, so I needed to do the following:

I have a div and a button, I want when I press the button to make an ajax call, and when I finish, I want to do:

• Removing a div.
• Or add a new one.

I want to learn how to do them (not with one click), with jQuery animations ( slideUp and slideDown ).

Answer 1

You can use ngShow to do the following angular based jsfiddle.

Html code:

 <div ng-app="App"> Click me: <input type="checkbox" ng-model="checked"><br/> <div class="check-element animate-show" ng-show="checked"> <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. </div> <div class="check-element animate-show" ng-hide="checked"> <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. </div> </div> 

CSS styles

 .animate-show.ng-hide-add, .animate-show.ng-hide-remove { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; display:block!important; } .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove { line-height:0; opacity:0; padding:0 10px; } .animate-show.ng-hide-add, .animate-show.ng-hide-remove.ng-hide-remove-active { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } .check-element { padding:10px; border:1px solid black; background:white; } 

And finally, the JavaScript code, remember to include the angular.js and angular-animate.js

 angular.module('App', ['ngAnimate']); 

I hope this helps you;)

Alternative-- You can also do the animation using javascript: -

 myModule.animation('fade', function() { return { setup : function(element) { element.css({'opacity': 0}); }, start : function(element, done, memo) { element.animate({'opacity': 1}, function() { done(); }); } }; }); 

Follow this link - http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#how-to-use-animations-in-angularjs