jquery - 角度动画

Question

目前我在 ng-click 控制器中有这行代码

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

虽然它工作得非常好，但我被告知我绝不能在控制器内进行动画/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>

更多代码，是的。但是现在你有了一些可重用的东西（而且你不需要选择器）。

小提琴

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

---

更新：
Angular 1.1.4 现在有一个ngAnimate指令。虽然它不像编写自己的动画指令那样灵活，但它可以处理许多场景。ng-show（和 ng-hide）指令支持show和hide 动画方法。

Answer 2

我建议您使用 AngularJS 1.1.4 Core 中提供的新 ngAnimate 指令。

在这里阅读更多