Question

我有两个表单，加载页面后，显示第一个，另一个隐藏。当我第一次单击“添加”按钮时，显示第二个表单的动画不起作用。但是第一次点击后，我可以再次点击取消按钮和添加按钮，然后一切正常。我怎样才能让这个工作也用于＆＃34;首先点击＆＃34;？

如果有人有兴趣，我正在尝试改编以下教程http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

我的傻瓜在这里http://plnkr.co/edit/02E8eQFHQVynK3mE1IMg?p=preview

html是

<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>

JavaScript动画部分如下所示：

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

Answer 1

事实证明我没有正确地遵循教程。

在移除ng-hide的行之前：

element.removeClass('ng-hide');

我需要隐藏元素，以便我可以执行动画，如下所示：

jQuery(element).hide();

所以现在show-part的动画看起来像这样：

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

AngularJS动画最初不起作用，但是在第一次点击之后一切都很好

1 个答案: