I'm new to AngularJs so I needed to do the following:
I have a div and a button, I want when I click the button to do ajax call and when I finish I want to do:
I want to learn how to do them both (not with same click of course) with jQuery animations (slideUp
and slideDown
).
You can use ngShow to make the following jsfiddle based on angular.
The 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>
The 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, don't forget to include the libraries angular.js
and angular-animate.js
angular.module('App', ['ngAnimate']);
I hope it helps you ;)
Alternative-2 You can also do 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With