在 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 Way" 的事情，我想我已经接近了。我在这里有一个指令：感谢

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")); 总能在页面上找到第一个具有此 class 名称的按钮，我需要将其更改为：

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

以便我在当前单击的元素而不是页面的第一个元素上执行动画。

Answer 1

AngularJS 中的动画应该以另一种方式使用。

有4种动画事件

进入
离开
移动
add/remove class

如果你想用 javascript 做到 'Angular way'，那么你想做的就是挂钩这些事件。

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

（来自文档：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 对您没有多大帮助；您想要的是在点击事件中添加或删除 class 名称。您可以通过多种方式添加 class，但这里有一个示例：

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

不过，您有时必须删除 class。最合适的时间可能是在使用 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中添加和删除classes，你必须使用一个Angular 附带的指令，或使用 angular 中的 $animate 服务。在您的第一个代码示例中，您使用 jQuery 添加 class，但 Angular 不会知道它。

Answer 2

但是你已经有了这个元素，你只需要

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

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

Animating a button with AngularJS inside ng-repeat

javascript

animation

angularjs

jqlite