Question

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

这是我的代码：

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，但有效。将数组设置为空，超时，然后在删除旧数组后设置数组。你需要注入$ timeout。我能想到的另一种方法是做同样的事情，但是等待转发事件而不是依赖于固定的超时。

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

这是 - JSFiddle -

ngAnimation和ng重复以更改所有项目

1 个答案: