我正在尝试将 $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 上:
最佳答案
要使用 ngAnimate 模块，您需要将其添加为模块的依赖项:
var app = angular.module('plunker', ['ngAnimate']);
您没有收到任何异常的原因是基础模块包含一个 $animate 服务，其默认实现如 documentation 中所述。 (有点困惑是的):
Default implementation of $animate that doesn't perform any animations, instead just synchronously performs DOM updates and calls done() callbacks.
In order to enable animations the ngAnimate module has to be loaded.
To see the functional implementation check out src/ngAnimate/animate.js
将 ngAnimate 模块添加为依赖项后，您的代码仍然不会像您希望的那样运行。然而，这是因为一些完全不同的东西，并且与 $animate 服务没有真正的关系:
.on() 是 Angular 的 jqLite 中包含的 jQuery 方法。附加事件处理程序中的代码位于 Angular 之外，因此您需要使用 $apply:
$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.
像这样包装你的 $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");
});
});
关于javascript - AngularJS $animate.enter 不添加 ng-enter 和 ng-enter-active 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22461136/