Question

我有一个2种形式的动画示例，其中第一种是隐藏的，另一种是在单击按钮时显示（并在单击取消时反转）。见http://plnkr.co/edit/asJ9u7MwRwMECpGaX3uz?p=preview

我想制作一个AngularJS版本。我正在努力适应关于这个主题的John Lindquist教程：http://egghead.io/lessons/angularjs-animating-the-angular-way

但现在我被卡住了。如何使第二个表单最初隐藏，如何使其行为类似于仅jQuery示例（以正确的Angular方式）？

正如您在http://plnkr.co/edit/Z4UYp1m3moVlarzbBNnO?p=preview上看到的那样，代码具有以下html：

<h1>Testing animation with AngularJS</h1>
<div ng-controller="MainCtrl as main" xmlns="http://www.w3.org/1999/html">
  <form ff-toggle-animation="!main.showNewUserForm" role="form">
    <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 ff-toggle-animation="main.showNewUserForm">
    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>
</div>

这是我到目前为止的剧本：

var app = angular.module('testApp', ['ngAnimate']);

app.controller('MainCtrl', function () {
  this.users = {};
  this.showNewUserForm = false;
  this.save = function() {
    // some code to save a new user
  }
});

app.directive("ffToggleAnimation", function ($animate) {
  return function (scope, element, attrs) {
    scope.$watch(attrs.ffToggleAnimation, function(newVal) {
      if(newVal) {
        $animate.addClass(element, "show");
      } else {
        $animate.removeClass(element, "show");
      }
    });
  }
});

app.animation(".show", function() {
  return {
    addClass: function(element, className) {
      $(element).toggle(400);
    },
    removeClass: function(element, className) {
      $(element).toggle(400);
    }
  };
});

我之所以需要2个表单而不是扩展第一个表单是有原因的，但这个例子没有传达这个理由。

试图让AngularJS动画发挥作用

0 个答案: