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

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

本文关键字：项目 空格 列表 删除列 ng 删除 leave      更新时间：2023-09-26

我已经使用ng repeat堆叠了几个div。当删除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移动向上滑动所有索引发生变化的div，但没有任何效果。

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

由于移除div有一定的高度，因此会出现空白。只需在ng-leave:上将其设置为0

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

这是小提琴。

您需要设置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会使转换更平滑）

相关文章：