个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
33
4
我正在尝试将 $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/
33
4
0
是否有在非 AngularJS 页面内初始化 AngularJS 应用程序的最佳实践方法？我正在向现有网页添加新功能，需要传入一个参数。具体来说，有一组选项卡，一个新选项卡将启动一个 Angular
找不到这两者之间的区别。 保留其中任何一个来引导我的 Angular 应用程序是否有意义？ angular.bootstrap(document,['myApp']); 或者 angularAMD.b
我试图理解 Packpub 的书附带的示例 AngularJS 应用程序。 app.js文件在 client/src/app 下定义文件夹，它的模块定义看起来像 angular.module('app
Angularjs 具有用于表单验证和显示错误消息的强大基础设施。但是，我处于必须在特定场景中向用户显示警告消息的情况。这是我的简单表格的图表 该表单在两个字段上都应用了必需和模式验证。除了此验证之外
我在重试功能正常工作时遇到了一些麻烦，希望能获得一些帮助。我有一个要调用的$ resource，直到出现成功情况或超过最大重试次数为止。 我似乎遇到的问题是，在我的重试函数中，我正在调用另一个prom
我目前正在开发一个 AngularJS 应用程序，我遇到了以下障碍。 当用户提交时，我们有一个 login 页面，我们调用一个 web api 并对用户进行身份验证，我们目前正在使用 claims 身
当范围更新时，指令的属性不会改变，它们仍然保持初始值。我在这里缺少什么？ HTML works great works: {{foo}} Javascript (基于首页上的 A
我正在使用 Zurb 的 Foundation 框架修改应用程序以实现响应性和 AngularJS。存在数据显示在带有 ... 的表中的错误有 是根据 Foundation 的响应规则隐藏/显示的。不
在过去的三天里，我一直在搜寻互联网，试图弄清楚当angular注意到div的宽度发生变化时如何使指令运行。 我不断看到相同的示例，说明如何实现此目标，但是它们对我不起作用，我也不知道为什么。 我回到一
我正在使用以下代码尝试汇总 在 Angular ，这在整个作品中，但是小于 0.5 的数字四舍五入为 0。我想 向上取整 每个数字到下一个整数。例如 0.02 应四舍五入为 1 {{((data.Vi
我目前正在尝试以一种能够适当扩展到企业级别的方式来组织我的 Angular 应用程序。但是我发现似乎过度依赖框架内的命名约定，并且试图避免命名冲突是一个真正的问题。 例如，当定义任何 constant
我正在阅读 AngularJS 基础知识，并且喜欢在我的页面中使用它的绑定(bind)功能。所以我可以定义可以在 View 中显示的数据，可以对数据进行更改，以便在 View 中更改它而无需担心。 在
在父 Controller 范围内，我定义了 selectedItem设置为“x”。然后在子范围内，我定义了selectedItem使用 ngModel:
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 5年前关闭。 Improve this questi
如果2个条件为真，我试图将一个特定的类应用于li元素，因此我编写了以下代码，但似乎无法正常工作 ng-class="{current:isActive('/'), loginStatus: false
请看看朋克。 http://plnkr.co/edit/DuTFYbLVbPkCIvRznYjG?p=preview ng-pattern regEx不适用于输入文本字段。 仅在需要验证的情况下才能正
我正在为iOS + Android构建AngularJS(1.x)和Ionic/Cordova移动应用程序。我想在登录页面上添加/创建“深层链接”，以便在我向新用户发送“确认您的电子邮件”电子邮件时，
angularjs 中服务(或工厂)的生命周期是什么，何时重新初始化？ 最佳答案 当 Angular 启动时，它会将服务的构造函数附加到关联的模块上。这种情况发生一次。 angular .modu
我对 Angular 很陌生，所以希望我知道的足够多，可以问什么似乎是合理的设计问题。 我正在通过 Angular 绘制一些数据，并且正在使用 $resource。在将 Angular 引入项目之前，
我需要在我的 angular-breeze 应用程序中使用国家/地区下拉菜单，我尝试了以下操作: https://github.com/banafederico/angularjs-country-s
我是一名优秀的程序员,十分优秀！