角动画

Question

目前，我有这行代码的权利在NG-点击控制器

$(".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> 

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

Fiddle

在小提琴，我加了NG-隐藏到div所以它不会初步显现。

---

更新：现在
角1.1.4有ngAnimate指令。虽然它不如编写自己的动画指令那么灵活，但它将处理许多场景。 ng-show（和ng-hide）指令支持show和hideanimation methods。

Answer 2

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

更多here