在 ng-repeat 中使用 AngularJS 为按钮设置动画

Question

我在这里有一个显示商品、尺寸、价格等的在线商店，我想为 .add-to-cart-btn <button> 添加动画，以便每次单击该按钮时，该按钮都会执行某种类型的动画片。我可以用 jQuery 来做到这一点：

$(document).ready(function() {
  $('.add-to-cart-btn').on('click', function() {
    $(this).addClass('bounce').delay(1000).removeClass('bounce');
  });
});

但我正在尝试以“Angular 方式”做事，我认为我已经接近了。我在这里有一个指令：感谢This Post

angular.module('ForeverLeather').directive('animateTrigger', ['$animate', function ($animate) {

  return function (scope, elem, attrs) {
    elem.on('click', function (elem) {
      scope.$apply(function() {
        var el = angular.element(document.getElementsByClassName("add-to-cart-btn"));
        var promise = $animate.addClass(el, "bounce");
        promise.then(function () {
          scope.$apply(function() {
            $animate.removeClass(el, "bounce");
          });
        });
      });
    });
  }
}]);

HTML

  <div class="col-md-4 col-sm-6" ng-repeat="item in templateItems">

      <div class="product-img-wrapper">
        <img ng-src="{{item.src}}">
      </div>

      <h3 class="product-header">{{item.name}}</h3>
      <p class="lead product-text">
        {{item.description}}
      </p>

      <div class="product-btn-wrapper">
        <select ng-options="size.size as size.text for size in item.sizes" ng-model="item.selectedItem.size"
                class="form-control" ng-change="getPrice(item, item.selectedItem.size)">
          <option value="" disabled>-- Select to view prices --</option>
        </select>
        <span class="text-left product-price">{{item.selectedItem.price | currency}}</span>
        <button ng-click="addToCart(item.type, item.name, item.selectedItem.size);" 
                class="btn btn-lg btn-success add-to-cart-btn animated" animate-trigger>
          <i class="fa fa-cart-plus"></i>&nbsp; Add To Cart
        </button>
      </div>

    </div>

这行得通..好吧，我的问题是 var el = angular.element(document.getElementsByClassName("add-to-cart-btn")); 总是在页面上找到具有此类名称的第一个按钮，我需要将其更改为：

var el = angular.element(elem); // invalid
var el = angular.element(this); // invalid

这样我就在当前点击的元素而不是页面的第一个元素上执行动画。

Answer 1

但是你已经有了元素，你所需要的只是

return function (scope, elem, attrs) {
    elem.on('click', function () {
      scope.$apply(function() {
        var promise = $animate.addClass(elem, "bounce");
        promise.then(function () {
          scope.$apply(function() {
            $animate.removeClass(elem, "bounce");
          });
        });
      });
    });
  }

Answer 2

AngularJS 中的动画旨在以另一种方式使用。

动画事件有4种

• 输入
• 离开
• 移动
• 添加/删除类

如果您想使用 javascript 以“Angular 方式”执行此操作，那么您要做的就是挂钩这些事件。

在这种情况下，您要定位的是这样的按钮：

（来自文档：https://docs.angularjs.org/api/ngAnimate）

myModule.animation('.slide', [function() {
  return {
    // make note that other events (like addClass/removeClass)
    // have different function input parameters
    enter: function(element, doneFn) {
      jQuery(element).fadeIn(1000, doneFn);

      // remember to call doneFn so that angular
      // knows that the animation has concluded
    },

    move: function(element, doneFn) {
      jQuery(element).fadeIn(1000, doneFn);
    },

    leave: function(element, doneFn) {
      jQuery(element).fadeOut(1000, doneFn);
    }
  }
}]

为了在点击时挂钩事件，enter、leave 和 move 对你没有多大好处；您想要的是在单击事件上添加或删除类名。您可以通过多种方式添加该类，但这里有一个示例：

<button ng-class="{'my-animation':model.animationOn}" ng-click="model.animationOn=true">My Button Text</button>

不过，您必须在某个时候删除该类。最合适的时间可能是使用 Angular 的动画 API 对该事件进行回调。像这样的：

myModule.animation('.my-btn', [function() {
  return {
    addClass: function(element, className, doneFn) {
      if(className == 'my-animation') {
        jQuery(element).fadeIn(1000, function() {
          doneFn(); // always call this when you're done
          element.removeClass('my-btn');
        });
      }
    }
  }
}]

另外，为了让 Angular 了解您在 javascript 中添加和删除类的信息，您必须使用 Angular 附带的指令之一，或者在 Angular 中使用 $animate 服务。在您的第一个代码示例中，您正在使用 jQuery 添加一个类，但 Angular 不会知道它。