1

我正在探索 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 中做错了什么？

4

2 回答 2

0

这是解决它的一种方法，尽管它非常有技巧！

我通过在第 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; }); } }

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

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

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

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

破解角度源文件绝对是最后的手段，但我认为别无选择。为什么它一开始就没有像这样工作，我不明白。此外，我不知道这些更改是否引入了一堆错误或意外行为，但它似乎工作正常。

于 2014-05-01T21:12:24.797 回答
0

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

这是一个技巧，您可以使用 $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);
    }

小提琴修改样本

于 2014-04-29T20:37:26.133 回答