使用 ng-animate $animate 自定义动画

Question

我需要一些帮助来更好地理解 AngularJS 1.3 中的自定义动画。

objective

点击一个元素
为 DOM

我创建了以下 plunkr 但没有成功

http://plnkr.co/edit/zg3BglCY9VfgPJc2pfNg?p=preview

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body ng-app="app">
    <ul>
      <li animate-trigger> Click on me to animate </li>
    </ul>

    <div  class="divtoanimate animated">
      Animate Action Baby
    </div>


  </body>

</html>

JS

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

app.directive('animateTrigger', ['$animate', function ($animate) {

    return function (scope, elem, attrs) {

        elem.on('click', function (elem) {

            var el = angular.element(document.getElementsByClassName("divtoanimate"));
            console.log("clicked");
            var promise = $animate.addClass(el, "bounceIn");

            promise.then(function () {
                $animate.removeClass(el, "bounceIn");
            });

        });

    }

}]);

Answer 1

由于您使用的是 jquery 事件处理程序，因此您需要调用 scope.$apply(function() {...}) 来执行 $animate 调用。

这里的 plunkr 更新为 scope.$apply:

http://plnkr.co/edit/qOhLWze8pGkO9dGRp1Sg?p=preview

有关 scope.$apply 的更多信息：

https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

Answer 2

使用 $scope.apply 作为初始动画，并在您的承诺中添加和删除类。查看下面的代码和附加的 plunkr，它演示了每次单击 animage-trigger 指令时动画重复。

working-plunkr

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

app.directive('animateTrigger', ['$animate', function ($animate) {

  return function (scope, elem, attrs) {
    elem.on('click', function (elem) {
      scope.$apply(function() {
        var el = angular.element(document.getElementsByClassName("divtoanimate"));
        var promise = $animate.addClass(el, "bounceIn");
        promise.then(function () {
          scope.$apply(function() {
            $animate.removeClass(el, "bounceIn");
          });
        });
      });
    });
  }
}]);

使用 ng-animate $animate 自定义动画

Custom Animations with ng-animate $animate

angularjs

ng-animate