角度动画

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切换模型/范围属性.

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

更多代码,是的.但是现在你有了可重复使用的东西(而且你不需要选择器).

小提琴

在小提琴中,我将div添加到div中,以便它最初不会出现.

更新:
Angular 1.1.4现在有一个ngAnimate指令.虽然它不像编写自己的动画指令那样灵活,但它可以处理许多场景.该NG秀(和NG-隐藏)指令支持show和hide 激励方法.

Answer 2

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

在这里阅读更多