Question

我使用ng-repeat堆叠了几个div，我正在使用ng-leave，这样当删除div时，它的高度会转换为0px。

一切正常。

但是，在删除之前，我在修改div的高度时遇到了困难。例如，如果我单击div上的“Animate Height”按钮，然后尝试删除它，ng-leave动画将不会运行 - 它只是等待1s才消失。

FIDDLE： https://jsfiddle.net/c1huchuz/32/

HTML：

<body ng-app="myApp" ng-controller="myController">
    <button ng-click="add_div()">Add Div</button>
    <div id="wrapper">
        <div ng-repeat="x in random_array" class="slide">               
            {{$index}}
            <button ng-click="remove_div($index)">Delete</button>
            <button ng-click="change_size($index)">Animate Height</button>
        </div>
    </div>
</body>

CSS：

.slide {
  position: relative;
  width: 160px;
  height: 30px;
  background-color: orange;
  border: 1px solid black;
}

.slide.ng-enter {
  transition: all 1s;
  top: -30px;
  z-index: -1; 
}

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

.slide.ng-leave {
  transition: all 1s;
  height: 30px;
  z-index: -1; 
}


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

JS：

var app = angular.module("myApp", ['ngAnimate']);
app.controller("myController", ["$scope", function($scope) {
    $scope.random_array = []
    $scope.add_div = function() {
        var x = $scope.random_array.length
        $scope.random_array.push(x)
    }
    $scope.remove_div = function(index) {
        $scope.random_array.splice(index, 1)
    }
    $scope.animate_height = function(index) {
        $(".slide:nth-child("+(index+1)+")").animate({"height":"60px"}, 1000).animate({"height":"30px"}, 1000)    
    }
}]);

Answer 1

@snookieordie请查看Fiddle周围的这项工作。我认为你在没有动画和1秒休息时删除div的问题是因为Angular无法找到高度为60px的div，就像你现有的css类一样。我只是改变了高度切换的css类。

if (tall) {
        $(".slide2:nth-child("+(i+1)+")").removeClass("slide2").addClass("slide");
        tall = false
    }
    else {
        $(".slide:nth-child("+(i+1)+")").removeClass("slide").addClass("slide2");
        tall = true
    }

Answer 2

在玩了一些之后，我发现问题不是特定于angularJS或ng-animate。

问题实际上是CSS优先级之一。 .animate()为受影响的div添加了内联样式属性，因此当我为div设置动画时，会将此style属性设置为height 30px。由于内联样式的CSS优先级高于类，因此.ng-leave和.ng-leave.ng-leave-active在添加时不会影响div的高度。

关于CSS优先级的详细阅读：http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

要解决此问题，我会在删除div本身之前删除div的style属性：

$scope.remove_div = function(index) {
    $(".slide:nth-child("+(index+1)+")").removeAttr("style") //added this line
    $scope.random_array.splice(index, 1)
}

修改div的高度后，ng-leave动画不起作用

2 个答案: