Question

我正在AngularJS中探索动画，我遇到了让交错的CSS动画工作的问题。添加新项目时它可以正常工作，但是当同时删除多个项目时，项目将从集合内部而不是从后面移除。换句话说，这些项目的移除方式与我期望的相反。

HTML：

<div ng-controller="CompaniesCtrl">
  <h2>Companies</h2>
  <button ng-click="add()">Add</button>
  <button ng-click="remove()">Remove</button>

  <ul>
      <li class="company" ng-repeat="company in companies">
          <div>
              <h4>{{company.name}}</h4>
              <p>{{company.description}}</p>
          </div>
      </li>
  </ul>
</div>

JavaScript的：

function CompaniesCtrl($scope) {
  $scope.companies = [
        { name: "Company A", description: 'A software vendor' },
        { name: "Company B", description: 'Another software vendor' },
        { name: "Company C", description: 'A software consultancy shop' },
        { name: "Company D", description: 'Another software consultancy shop' }
    ];

    $scope.add = function () {
        $scope.companies.push({ name: "Another company", description: 'Another software consultancy shop' });
        $scope.companies.push({ name: "Another company", description: 'Another software consultancy shop' });
        $scope.companies.push({ name: "Another company", description: 'Another software consultancy shop' });
    };

    $scope.remove = function () {
        $scope.companies.splice($scope.companies.length - 3, 3);
    };
}

CSS：

.company {
    background-color: red;
    margin: 10px;
    padding: 10px;
}
.company.ng-enter-stagger, .company.ng-leave-stagger, .repeat-animation.ng-move-stagger {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;

    -webkit-transition-duration: 0;
    transition-duration: 0;
}

.company.ng-enter {
    -webkit-transition:0.2s linear all;
    transition:0.2s linear all;

    opacity: 0;
    -webkit-transform:scale(1.15)!important;
    transform:scale(1.15)!important;
}
.company.ng-enter.ng-enter-active {
    opacity: 1;
    -webkit-transform:scale(1)!important;
    transform:scale(1)!important;
}

.company.ng-leave {
    -webkit-transition:0.1s linear all;
    transition:0.1s linear all;

    opacity: 1;
}
.company.ng-leave.ng-leave-active {
    opacity: 0;
}

我在这里创建了一个记录问题的JSFiddle：http://jsfiddle.net/VNB7R/

这是一个已知问题，还是我在JS代码或CSS中做错了什么？

Answer 1

我相信动画库的运作方式。它不知道删除了什么或添加它只是重新渲染数组。

这是一个可以应用来模仿使用$ timeout的相同行为的技巧。

    var remove = function () {
        $scope.companies.splice($scope.companies.length - 1, 1);
    };

    $scope.remove = function () {
         for (var i = 0; i < 3; i++)
            $timeout(remove, 100);
    }

Fiddle Modified Sample

Answer 2

这是解决问题的一种方法，虽然它非常糟糕！

我通过在20033行添加以下代码来更改angular.js文件（版本1.2.16）：

var elements = 0;
for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { elements++; } }
for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { forEach(getBlockElements(lastBlockMap[key].clone), function (e) { e.ElementsToRemoveCount = elements; }); } }

可能有更优雅的方式来编写代码，但它被编写为尽可能紧凑并且不会干扰周围的代码。

此外，必须在第1227行的angular-animate.js文件（也是版本1.2.16）中添加以下代码：

if (animationEvent == 'leave' && element[0].ElementsToRemoveCount)
   itemIndex = element[0].ElementsToRemoveCount - itemIndex;

第一个代码段标记元素，其中包含有关要删除的元素总数的信息。在“离开”动画的情况下，第二个代码片段会反转用于确定删除顺序的索引。

这绝对是破解角度源文件的最后手段，但我认为别无选择。为什么在我不理解的第一个地方没有实现这样的工作。此外，我不知道我是否已经在这些更改中引入了一堆错误或意外行为，但它确实可以正常工作。

如何在AngularJS Animate中使用ng-leave-stagger

2 个答案: