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

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

javascript angularjs

Javascript 使用ng leave删除列表中的项目时如何避免空格,javascript,angularjs,ng-animate,Javascript,Angularjs,Ng Animate,我已经用ng repeat把几个div叠起来了。删除div时，我使用ng leave向上滑动div。我想要的是删除的分区下面的所有分区都与删除的分区一起向上滑动，这样就不会有任何空白在我看来，删除的div在1s转换期间留下了一个空白，然后所有下方的div立即向上移动小提琴： HTML: <body ng-app="myApp" ng-controller="myController"> <button ng-click="add_div()">Add Div

我已经用ng repeat把几个div叠起来了。删除div时，我使用ng leave向上滑动div。我想要的是删除的分区下面的所有分区都与删除的分区一起向上滑动，这样就不会有任何空白

在我看来，删除的div在1s转换期间留下了一个空白，然后所有下方的div立即向上移动

小提琴：

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>

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)
    }

}]);

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; 
}

CSS:

<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>

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)
    }

}]);

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具有一定的高度，因此会出现空白。只需将其设置为0，即可离开：

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

以下是。

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

（imho将“过渡”设置为0.2会提供更平滑的过渡）

是否需要过渡效果？如果否，则从1到0的转换时间将解决您的问题。@Kunal Kakkad我希望div在删除时向上滑动。这就是你所说的过渡效应吗？