AngularJS动画美元.输入不添加ng-enter和ng-enter-active类

AngularJS $animate.enter not adding ng-enter and ng-enter-active classes

本文关键字：ng-enter ng-enter-active 添加 动画 美元 输入 AngularJS      更新时间：2023-09-26

我试图将$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给我的问题。

我把例子放在朋克上:

http://plnkr.co/edit/XtvZAZzgA8ORZBaRN68d?p =预览

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

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

你没有得到任何异常的原因是，基本模块包含一个$animate服务，具有文档中描述的默认实现(有点令人困惑):

$animate的默认实现，不执行任何操作而只是同步执行DOM更新和调用完成()回调。

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

查看功能实现签出src/ngAnimate animate.js

添加ngAnimate模块作为依赖项，您的代码仍然不会像您希望的那样运行。然而，这是因为一些完全不同的东西，而不是真正与$animate服务有关:

.on()是一个包含在Angular的jqLite中的jQuery方法。附加事件处理程序中的代码位于Angular之外，所以你需要使用$apply:

$apply()用于从外部执行angular中的表达式角框架。(例如，从浏览器DOM事件，setTimeout, XHR或第三方库)。因为我们正在呼叫angular框架需要执行合适的作用域生命周期异常处理，执行手表。

像这样包装您的$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

相关文章：