javascript - ngAnimation 和 ngRepeat 更改所有项目

Question

我正在使用 ngRepeat 显示一个简单的列表。当触发按钮单击时，我需要更改列表中的所有旧项目，然后显示新项目。我想使用某种动画(可以是不透明度、高度或其他)来做到这一点。是否可以在开始添加新项目之前让所有旧项目消失。

这是我的代码:

http://jsfiddle.net/Lyk6Lqe5/2/

HTML

<div ng-controller="MyController" >
    <button ng-click="changeAll()">Change</button>
    <ul>
        <li class="item" ng-repeat="i in myList">{{i}}</li>
    </ul>
</div>

JS

var MyApp = angular.module('MyApp', ['ngAnimate'])
MyApp.controller('MyController', ['$scope',function($scope){
    $scope.list_a = ["Item A","Item B","Item C"];
    $scope.list_b = ["Item D","Item E","Item F", "Item G"];
    $scope.myList = $scope.list_a;

    $scope.changeAll = function(){
        $scope.myList = $scope.myList.length == 3 ? $scope.list_b : $scope.list_a;
    }
}]);

CSS

.item.ng-enter,
.item.ng-leave{
    transition:all 1s ease;
}

.item.ng-enter,
.item.ng-leave.ng-leave-active{
    opacity:0;
}

.item.ng-enter.ng-enter-active,
.item.ng-leave{
    opacity:1;
}

Answer 1

一种方法有点hacky，但是有效。就是将数组设置为空，超时，等旧数组被移除后再设置数组。您将需要注入(inject) $timeout。我能想到的唯一其他方法是做同样的事情，但等待 Transitionend 事件而不是依赖固定超时。

$scope.changeAll = function(){
    var oldList = $scope.myList;
    $scope.myList = [];
    $timeout(function() {
        $scope.myList = oldList.length == 3 ? $scope.list_b : $scope.list_a;
    }, 900);
}

这里是 -- JSFiddle --