Javascript ngAnimation和ngRepeat可更改所有项目

我用ngRepeat显示了一个简单的列表。 当点击按钮时，我需要更改列表中的所有旧项目，然后显示新项目。 我想使用某种动画（可以是不透明度、高度或其他）。 在开始添加新项目之前，是否可以先删除所有旧项目

这是我的密码：

HTML

CSS

---

一种方法有点老套，但很有效。将数组设置为空、超时，然后在删除旧数组后设置数组。您需要注入$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);
}

---

这里有一个--

嗯，这不是我所期望的最好的答案，但它有帮助。非常感谢

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;
    }
}]);

.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;
}

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