1

我有 2 个表单，加载页面后，第一个显示，另一个隐藏。当我第一次单击添加按钮时，显示第二种形式的动画不起作用。但第一次点击后，我可以再次点击取消按钮和添加按钮，然后一切正常。我怎样才能让它也适用于“第一次点击”？

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

我的 plunker 在这里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();
      }
    }
  };
});
4

1 回答 1

2

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

在删除 ng-hide 的行之前：

element.removeClass('ng-hide');

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

jQuery(element).hide();

所以现在展示部分的动画看起来像这样：

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();
  }
}
于 2013-11-02T07:23:33.790 回答