Question

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

目标

点击元素
动画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

使用$ scope.apply作为初始动画，并在promise中添加和删除类。查看下面的代码和附带的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");
          });
        });
      });
    });
  }
}]);

Answer 2

由于您正在使用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- $范围。$申请（）

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

2 个答案: