Angularjs列出动画一致性

Question

我正在处理内置于angularjs 1.6.10中的自定义选择元素，但是我的动画无法正常工作，我有两个带有动画的列表，但是第二个不能为所有元素设置动画，如果上一个列表具有三个元素，第二个具有七个元素，只有四个元素可以进行动画处理，而不是所有元素。

我已创建此pen来显示当前问题。

我希望你们能帮助我！

最好！

HTML

var app = angular.module('app', ['ngAnimate']);
app.controller('MainCtrl', function($window, $scope){
    $scope.items = [
    {
        name: "Item 1",
        subFilters: [
            {name: "Child 1.1"},
            {name: "Child 1.2"},
            {name: "Child 1.3"},
            {name: "Child 1.4"},
            {name: "Child 1.5"},
        ]
    },{
        name: "Item 2",
        subFilters: [
            {name: "Child 2.1"},
            {name: "Child 2.2"},
            {name: "Child 2.3"}
        ]
    },{
        name: "Item 3",
        subFilters: [
            {name: "Child 3.1"},
            {name: "Child 3.2"},
            {name: "Child 3.3"},
            {name: "Child 3.4"},
            {name: "Child 3.5"},
            {name: "Child 3.6"},
            {name: "Child 3.7"},
            {name: "Child 3.8"},
            {name: "Child 3.9"},
            {name: "Child 3.10"},
            {name: "Child 3.11"},
            {name: "Child 3.12"},
            {name: "Child 3.13"},
        ]
    }];

    $scope.changeActiveItem = function (item) {
        $scope.selectedItem = item;
    }
});

.main-list, .sub-list {
    width: 45%;
    display: inline-block;
    vertical-align: top;
}

li {
  cursor: pointer;
    opacity: 1;
}
li.ng-enter {
    transition: all .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate3d(101%, 0, 0);
}
li.ng-enter-active {
    transform: translate3d(0, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.7.2/angular-animate.js"></script>

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <ul class="main-list">
            <li ng-repeat="item in items track by $index" ng-click="changeActiveItem(item)">
                {{item.name}}
            </li>    
        </ul>

        <ul class="sub-list">
            <li ng-repeat="item in selectedItem.subFilters track by $index">
                {{item.name}}
            </li>    
        </ul>
    </div>  
</div>