角度动画答案

【问题标题】：Angular animation角度动画
【发布时间】：2013-04-08 23:43:17
【问题描述】：

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

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

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

【问题讨论】：

一些不错的角度动画：AngularJS Animations

标签： jquery animation angularjs

【解决方案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

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

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

【讨论】：

【解决方案2】：

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

阅读更多here

【讨论】：