Question

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

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

但我正试图做的事情＆＃34; Angular Way＆＃34;我觉得我很接近我在这里有一个指令：感谢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，那么你想要做的是挂钩这些事件。

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

（来自文档：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对你没有多大好处;你想要的是在click事件上添加或删除一个类名。你可以通过多种方式添加课程，但这里有一个例子：

<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附带的指令之一，或者使用$animate服务角。在您的第一个代码示例中，您使用jQuery添加了一个类，但Angular不会知道它。

在ng-repeat内部使用AngularJS设置动画

2 个答案: