Question

我正在使用angularjs和ngAnimate，但遇到动画如何处理的问题。我有一个ng-repeat，它显示一系列浮动块，允许用户单击其中的链接并导航到页面的较低级别（加载新级别数据）。当单击其中一个链接时，我使用新级别的块更新$scope.items数组，这是动画行为笨拙的地方。现有的块在它们淡出时向下滑动，为正在淡入的新块腾出空间。我想淡出现有块然后淡入新块（不是同时）。我已经尝试过所有可以想象的事情来推迟“进入”动画，让“离开”动画有时间完成，但到目前为止还是空洞。

我已将我的应用程序简化为这个简单的示例 - navigate()中的ng-click函数通常会对新数据发出$http次请求，但我只是将其设置为返回修改后的数据（动画行为与我的应用程序中出现的内容完全匹配，而没有使用$http请求和数据处理共享我的完整应用程序的开销。

我感谢任何帮助。感谢点。

使用Javascript：

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.items = [1, 2, 3, 4];
    $scope.navigate = function () {

        var newItems = [];

        for (i = 0; i < $scope.items.length; i++) {
            newItems.push($scope.items[i] + 4);
        }

        $scope.items = newItems;

    };
}]);

HTML：

<div class="block" ng-repeat="item in items">
    <a href="" ng-click="navigate();">
        {{item}}
    </a>
</div>

CSS：

.block {
    background: #e6e6e6;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    float: left;
    opacity: 1;
}

/* animation css */
.block.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
.block.ng-enter.ng-enter-active {
    opacity: 1;
}
.block.ng-leave {
    -webkit-transition: .9s;
    transition: .9s;
    opacity: 1;
}
.block.ng-leave.ng-leave-active {
    opacity: 0;
}

问题演示：jsfiddle

Answer 1

Hacky回答：

我可以使用$timeout模块延迟新项目。基本上，我清除$scope.items，等待1秒，然后用新数据填充它。 我真的希望有更好的方法来做到这一点，但我想我会分享这个，因为这是我迄今为止找到的唯一解决方案。

myApp.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.items = [0, 1, 2, 3, 4];
    $scope.navigate = function () {

        var newItems = [];

        for (i = 0; i < $scope.items.length; i++) {
            newItems.push($scope.items[i] + 4);
        }

        //clear out items array (starts the leave animation)
        $scope.items = [];

        //wait 1s for leave animation to complete then re-populate the items array
        $timeout(function(){
            $scope.items = newItems;
        }, 1000);

    };
}]);

'工作' hacky 演示： jsfiddle

动画重复块中的浮动项目

1 个答案: