jquery - Angular 动画

Question

目前我在 ng-click Controller 中有这行代码

$(".message").show(300).delay(900).hide(300);

虽然它工作得非常好，但我被告知我绝对不能在 Controller 内进行动画/jQuery/DOM 操作。有没有另一种方法可以做到这一点，而不涉及大量的困惑？

Answer 1

编写一个简单的指令来监视其属性:

app.directive('animateMe', function() {
   return function(scope, element, attrs) {
      scope.$watch(attrs.animateMe, function() {
         element.show(300).delay(900).hide(300);
      })
   }
})

将该指令放在要设置动画的 HTML 元素上。让 ng-click 切换模型/范围属性。

<a ng-click="animateToggle = !animateToggle">animate</a>
<div animate-me="animateToggle">...</div>

更多代码，是的。但现在您有了可重用的东西(并且不需要选择器)。

Fiddle

在 fiddle 中，我将 ng-hide 添加到 div，以便它最初不会出现。

<小时/>

更新:
Angular 1.1.4 现在有 ngAnimate指示。虽然它不如编写自己的动画指令那么灵活，但它可以处理许多场景。 ng-show (和 ng-hide)指令支持 show 和 hide animation methods .