使用 ng-leave 删除列表中的项目时如何避免 space

Question

我使用 ng-repeat 叠加了几个 div。我正在使用 ng-leave 在 div 被删除时向上滑动。我想要的是删除的下面的所有 div 都与删除的一起向上滑动，所以永远不会有空的 space.

据我所知，删除的 div 在 1s 转换期间留下空 space，然后下面的 divs 立即向上移动。

FIDDLE: https://jsfiddle.net/c1huchuz/6/

HTML:

<body ng-app="myApp" ng-controller="myController">

    <button ng-click="add_div()">Add Div</button><br/><br/>

    <div ng-repeat="x in random_array" class="slide">        
        {{$index}}
        <button ng-click="remove_div($index)">Delete</button>
    </div>

</body>

JS:

var app = angular.module("myApp", ['ngAnimate']);

app.controller("myController", ["$scope", function($scope) {

    $scope.random_array = []

    $scope.add_div = function() {
        var i = $scope.random_array.length
        $scope.random_array.push(i)
    }

    $scope.remove_div = function(index) {
        $scope.random_array.splice(index, 1)
    }

}]);

CSS:

div {
    position: relative;
    width: 90px;
    height: 30px;
    background-color: orange;
    border: 1px solid black;
}

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

.slide.ng-enter, .slide.ng-leave.ng-leave-active {
    top: -30px;
    z-index: -1; 
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
    top: 0px;
    z-index: -1; 
}

我尝试使用以下 ng-move 将所有索引更改的 div 向上滑动，但没有任何效果。

.slide.ng-move {
    transition: all 1s;
    top: 0px;
}

.slide.ng-move.ng-move-active {
    top: -31px;
}

Answer 1

出现空白space是因为去掉div有一定的高度。只需在 ng-leave:

上将其设置为 0

.slide.ng-leave.ng-leave-active{
  height: 0px;
}

这里是 fiddle.

Answer 2

您需要为 ng-leave 设置高度（您可能还想设置浏览器对过渡的支持）：

.slide.ng-enter, .slide.ng-leave{
    transition: all ease 1s;
    -moz-transition: all ease 1s;
    -webkit-transition: all ease 1s;
    -o-transition: all ease 1s;
    max-height: 0; 
}

（恕我直言，将过渡设置为 0.2 会提供更平滑的过渡）

使用 ng-leave 删除列表中的项目时如何避免 space

How to avoid space when using ng-leave to remove item in list

javascript

angularjs

ng-animate