6

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:

  1. Deleting the div.
  2. Or adding new one.

I want to learn how to do them both (not with same click of course) with jQuery animations (slideUp and slideDown).

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Dabbas
  • 3,112
  • 7
  • 42
  • 75
  • Heres a good article on ng-animate - http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html – Dylan Sep 07 '14 at 18:01
  • I'm reading it right now, didn't finish it yet, but I wondered why it's a bit complicated to do animations in Angular, maybe there's an easy way I don't know about (other than CSS, because it's not supported in all browsers). – Dabbas Sep 07 '14 at 18:04

1 Answers1

2

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

pankaj
  • 474
  • 5
  • 15
  • This was very helpful but do I have to use CSS animations? what if some browsers didn't support it ? Isn't there any way to do show\hide using slideDown\slideUp in jQuery library (maybe those are implemented in lite jquery inside Angular)..? – Dabbas Sep 07 '14 at 18:02
  • 1
    You can define your own animation module if you want to use javascript. Updated the answer. – pankaj Sep 07 '14 at 18:11
  • I included 'AngularJs v1.2.23' and 'angular-animate.min.js' in my page and tried what this link suggested, show\hide is working but without animation, what could be the problem? – Dabbas Sep 07 '14 at 18:26
  • Sorry, wasn't injecting 'ngAnimate' – Dabbas Sep 07 '14 at 18:34