Angularjs 角度js动画

我有一个简单的演示，需要帮助制作动画。你能提供一些帮助吗

以下是代码：

      var demoApp = angular.module('demoApp', []);

      function SimpleController($scope) {

          demoApp.controller('SimpleController', SimpleController)

          $scope.customers = [{
              name: 'Element  1111 '
          }, {
              name: 'Element 222 '
          },

          ];


          $scope.swap = function (index) {

              var temp = $scope.customers[0].name;
              $scope.customers[0].name = $scope.customers[1].name;
              $scope.customers[1].name = temp;


          }

      }

单击单元格时，我交换元素。我想提供动画来显示元素111正在移动到另一个单元，而元素222在交换期间正在移动

---

有什么建议吗

您可以创建一个指令，用于监视元素的innerHTML并在每次更改时执行动画：

app.directive('animateInnerhtmlChange', ['$animate', 
  function ($animate) {
    return {
      link: function (scope, element, attrs) {

        var cssClass = 'myClass';

        var unbind = scope.$watch(function () { return element[0].innerHTML; }, function (newValue, oldValue) {
          if (newValue === oldValue) return;
          $animate.addClass(element, cssClass, function () {
            $animate.removeClass(element, cssClass);
          });
        });

        scope.$on('$destroy', function () {
          unbind();
        });
      }
    };
  }]);

请注意，我引用了

angular animate.js

，并将

ngAnimate

模块作为依赖项包括在内：

var app = angular.module('plunker', ['ngAnimate']);

---

演示：

元素在DOM中没有移动，它们的内部HTML只是在变化。这是你想要的，还是你想要元素真正移动？是的，没错。当innerHTML以某种方式发生变化时，我想连接它。感谢您提供的信息。我描述的问题是我试图解决的实际动画的一个子集。我绑定到一组具有名称和图像的客户。假设我有3个名字和图片集。当我点击一个图像时，我会重建客户阵列，这样点击的客户图像就会移动到中心。因此，我想提供动画，使其感觉单击的图像实际上正在移动到中心，但幕后数据绑定开始，UI被刷新。很难猜测用例是其他的：）请发布一个新的问题和实际用例，或者更新现有的问题。当然，这是plunkr，不幸的是，我不知道如何添加图像或在plunkr中创建包含一些图像的图像文件夹。但是我已经更新了源代码。这是更新的Plunkr，虽然我添加了一些动画，但它似乎不起作用。这是更新的Plunkr，有一些动画代码，但它不起作用