私は 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 で何か間違ったことをしていますか?