自定义动画与NG-动画动画$ [英] Custom Animations with ng-animate $animate
本文介绍了自定义动画与NG-动画动画$的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要AngularJS 1.3更好地了解自定义动画一定的帮助。
目标
- 单击一个元素
- 在DOM动画单独的元素
我创建了以下plunkr没有成功
http://plnkr.co/edit/zg3BglCY9VfgPJc2pfNg?p=$p$ PVIEW
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT; ＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件＆GT; ＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js\"></script> ＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js\"></script> ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT; ＆LT; /头＆GT; ＆LT;机身NG-应用=应用程序＆GT;
＆LT; UL＆GT;
＆LT;李动画触发＆GT;点击我的动画＆LT; /李＆GT;
＆LT; / UL＆GT; ＆LT; DIV CLASS =divtoanimate动画片＆GT;
动画动作宝贝
＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
JS
使用严格的;
VAR应用= angular.module（'应用'，['ngAnimate']）app.directive（'animateTrigger'，['$动画'，函数（$动画）{ 返回功能（范围，ELEM，ATTRS）{ elem.on（'点击'，功能（ELEM）{ 变种埃尔= angular.element（document.getElementsByClassName（divtoanimate））;
的console.log（点击）;
VAR承诺= $ animate.addClass（ELbounceIn）; promise.then（函数（）{
$ animate.removeClass（ELbounceIn）;
}）; }）; }}]）;
解决方案
使用$ scope.apply初始动画和诺言，都添加和删除类中。看看下面的code和附加plunkr，这表明了动画每次单击animage触发指令时重复。
VAR应用= angular.module（'应用'，['ngAnimate']）app.directive（'animateTrigger'，['$动画'，函数（$动画）{ 返回功能（范围，ELEM，ATTRS）{
elem.on（'点击'，功能（ELEM）{
范围。$应用（函数（）{
变种埃尔= angular.element（document.getElementsByClassName（divtoanimate））;
VAR承诺= $ animate.addClass（ELbounceIn）;
promise.then（函数（）{
范围。$应用（函数（）{
$ animate.removeClass（ELbounceIn）;
}）;
}）;
}）;
}）;
}
}]）;
I need some help on better understanding custom animations in AngularJS 1.3.
The objective
- Click on an element
- Animate separate element on the DOM
I have created the following plunkr with no success
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");
});
});
}
}]);
解决方案
Use $scope.apply for the initial animation and inside your promise to both add and remove the classes. Check out the code below and the attached plunkr, which demonstrates the animation repeating each time the animage-trigger directive is clicked.
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");
});
});
});
});
}
}]);
这篇关于自定义动画与NG-动画动画$的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
