Question

我正在尝试将$animate服务合并到我自己的指令中。我无法进入并离开实际的动画。

奇怪的是使用$animate.enter，元素被附加到DOM，并且回调函数触发。但似乎永远不会添加ng-animate，ng-enter和ng-enter-active类。该元素只是附加到DOM而没有动画。触发函数触发，但它会立即触发，而不是在应该发生的动画持续时间之后触发。同样的事情发生在leave;该元素立即从DOM中删除，并且回调立即触发;没有动画。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>$animate.enter</title>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.5/angular-animate.js" data-semver="1.2.5"></script>

    <script type="text/javascript" charset="utf-8">
        var app = angular.module('TestAnimation', []);

        app.controller('TestAnimation', function($scope) {
        });

        app.directive("appendaroo", function($animate, $compile) {
          function link(scope, element, attr) {
            var isAppended = false;
            var parent = element.parent();
            var box;
            element.on('click', function() {
              isAppended = !isAppended;
              if (isAppended) {
                box = angular.element('<div class="rect"></div>');
                $animate.enter(box, parent, element, function() {
                  console.log("Done entering");
                });
              } else {
                $animate.leave(box, function() {
                  console.log("Done leaving");
                });
              }
            });
          }
          return {
            link: link
          };
        });
    </script>

    <style type="text/css" media="screen">
        .rect {
            width: 100px;
            height: 100px;
            background-color: #ff9933;
            transition: all 1s ease-out;
        }
        .rect.ng-enter,
        .rect.ng-leave.ng-leave-active {
            opacity: 0;
        }
        .rect.ng-enter.ng-enter-active,
        .rect.ng-leave {
            opacity: 1;
        }
    </style>

  </head>

  <body ng-controller="TestAnimation" ng-app="TestAnimation">
      <button appendaroo>Fade in/out</button>
  </body>

</html>

我对Angular很新，我觉得我只是遗漏了一些东西，所以如果这是一个疯狂的愚蠢问题，请道歉。但似乎没有很多资源可用于在您自己的指令中使用$animate。

我可以毫无问题地使用$animate.addClass和$animate.removeClass，这很有帮助，并建议我走在正确的轨道上，但enter和leave是给我带来麻烦。

我把例子放在Punker上：

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

Answer 1

要使用ngAnimate模块，您需要将其添加为模块的依赖项：

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

您没有获得任何异常的原因是基本模块包含$animate服务，其默认实现如documentation中所述（有点令人困惑的是）：

没有执行任何操作的$ animate的默认实现   动画，而只是同步执行DOM更新和调用   done（）回调。

为了启用动画，必须加载ngAnimate模块。

查看功能实现检查   SRC / ngAnimate / animate.js

将ngAnimate模块添加为依赖项后，您的代码仍然不会像您希望的那样运行。然而，这是因为完全不同而且与$animate服务无关：

.on()是Angular的jqLite中包含的jQuery方法。附加事件处理程序中的代码位于Angular之外，因此您需要使用$ apply：

$ apply（）用于从外部执行角度表达式角度框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库）。因为我们正在呼唤我们需要执行适当范围生命周期的角度框架异常处理，执行手表。

像这样包裹您的$animate来电，您的代码可以正常使用：

scope.$apply(function () {
  $animate.enter(box, parent, element, function() {
    console.log("Done entering");
  });
});

scope.$apply(function () {
  $animate.leave(box, function() {
    console.log("Done leaving");
  });
});

演示： http://plnkr.co/edit/iWHBNyKfwiSUUFKrMQff?p=preview

AngularJS $ animate.enter不添加ng-enter和ng-enter-active类

1 个答案: