CODEWITHSUNDEEP
angularjsangularjs-animation
EricC
EricC

Reputation: 5870

AngularJS animation initially does not work, but after first click all is good

I have 2 forms, after loading the page, the 1st is shown and the other is hidden. When I first click Add-button, my animation that reveals the 2nd form does not work. But after the first click, I can click cancel-button and add-button again, then all works properly. How can I get this to work also for the "first click"?

If anyone are interested, I am trying to adapt from the following tutorial http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

My plunker is here http://plnkr.co/edit/02E8eQFHQVynK3mE1IMg?p=preview

The html is

<div ng-controller="MainCtrl as main" xmlns="http://www.w3.org/1999/html">
  <form ng-hide="main.showNewUserForm" class="ff-toggle-animation">
    <input type="text" id="search" ng-model="main.username" size="30" placeholder="New username here">
    <button type="submit" class="btn btn-primary" ng-click="main.showNewUserForm=true">Add</button>
  </form>
  <form ng-show="main.showNewUserForm" class="ff-toggle-animation">
    Username:  <input type="text" id="add" ng-model="main.username" size="30" placeholder="New username here"><br>
    Full name:  <input type="text" ng-model="main.name" size="30" placeholder="Add new user full name here"><br>
    Description: <textarea id="description" rows="2" ng-model="main.description" placeholder="Add user description here"></textarea>
    <button type="submit" ng-click="main.save()">Save</button>
    <button type="submit" ng-click="main.showNewUserForm=false">Cancel</button>
  </form>
  Some content after...
</div>

The JavaScript animation part looks like this:

app.animation('.ff-toggle-animation', function() {
  return {
    addClass : function(element, className, done) {
      if(className == 'ng-hide') {
        jQuery(element).hide(400, done);
      }
      else {
        done();
      }
    },
    removeClass : function(element, className, done) {
      if(className == 'ng-hide') {

        /* remove it early so you can animate on it since
           it is not possible using element.css() to set
           a style using !important */
        element.removeClass('ng-hide'); 
        jQuery(element).show(400, done);
      }
      else {
        done();
      }
    }
  };
});

Upvotes: 1

Views: 1259

Answers (1)

EricC
EricC

Reputation: 5870

It turnes out that I had not followed the tutorial properly.

Before the line where the ng-hide is removed:

element.removeClass('ng-hide');

I need to hide the element so I can performe the animation, like this:

jQuery(element).hide();

So now the animation for the show-part looks like this:

removeClass : function(element, className, done) {
  if(className == 'ng-hide') {
    jQuery(element).hide();

    /* remove it early so you can animate on it since
     it is not possible using element.css() to set
     a style using !important */
    console.log(element);
    element.removeClass('ng-hide');
    jQuery(element).show(400, done);
  }
  else {
    done();
  }
}

Upvotes: 2

Related Questions