Javascript 在位置更改时设置阵列项目的动画

这将使用

ng repeat

以无序列表的形式显示数组

每个项目都有一个向上/向下按钮，可以通过javascript

拼接

与上面或下面的项目交换位置

还有一个animate指令为每个移动的项目添加一个类：向上移动的项目以绿色高亮显示，向下移动的项目以红色高亮显示

但是，我认为动画有缺陷，因为指令在

单击
时触发
addClass
和
removeClass
。如果是这样，有人能提出建议吗？如果是这样，应该以什么事件来取代它？我尝试了
$scope.$watch
但未成功

我想到一个更好的方法可能是观察数组集合，比较索引更改，并根据项目索引是>还是<之前>突出显示。
您有几个错误。这是一个叉子


$watch
方法将字符串作为其第一个参数
您试图传递给
$animate
的
元素应命名为
elem


接下来，请记住，
$watch
处理程序仅在
方向更改时才会启动。因此，如果你“向上”两次，它只会在第一次设置动画。您需要再次“向下”，然后它才会设置“向上”动画。但是你现在应该能够找到让它工作的方法

angular.module('App').directive('animateOnChange', function($animate) {
  return function(scope, elem, attr) {
    scope.$watch('direction', function(newVal) {
      if (newVal == 'up') {
        $animate.addClass(elem, 'change-up', function() {
          $animate.removeClass(elem, 'change-up');
        });
      }
    });
  } ; 
});