Question

我使用ng-repeat堆叠了几个div。我删除时使用ng-leave来滑动div。我想要的是删除的那个下面的所有div都会删除已删除的div，因此永远不会有任何空白区域。

正如我所知，删除的div在1s过渡期间留下一个空白空间，然后所有下方的div立即向上移动。

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

出现空格，因为删除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; 
}

（imho设置过渡到0.2可以实现更平滑的过渡）

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

2 个答案: