Javascript ng离开动画不'；修改div高度后，t工作_Javascript_Jquery_Angularjs_Ng Animate

Javascript ng离开动画不'；修改div高度后，t工作

javascript jquery angularjs

Javascript ng离开动画不'；修改div高度后，t工作,javascript,jquery,angularjs,ng-animate,Javascript,Jquery,Angularjs,Ng Animate,我使用ng repeat将几个div堆叠起来，并且使用ng leave，这样当一个div被删除时，它的高度将转换为0px 这一切都很好但是，在删除div之前的任何时候修改div的高度都会遇到困难。例如，如果我单击div上的“动画高度”按钮，然后尝试删除它，ng leave动画将不会运行——它只是等待1s后消失小提琴： HTML: <body ng-app="myApp" ng-controller="myController"> <button ng-click="

我使用ng repeat将几个div堆叠起来，并且使用ng leave，这样当一个div被删除时，它的高度将转换为0px

这一切都很好

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

小提琴：

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>

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

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

JS:

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

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

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

@snookieordie请看一下这项工作。我认为您在没有动画和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
    }

在玩了一些之后，我发现这个问题并不是特定于angularJS或ng animate的

这个问题实际上是CSS优先权的问题之一

.animate（）

向受影响的div添加一个内联样式属性，因此当我为div设置动画时，该

样式属性设置为高度30px
。由于内联样式的CSS优先级高于类，因此添加时，.ng leave
和.ng leave.ng leave active
不会影响div高度
阅读CSS优先顺序：
要解决此问题，我先删除div的style属性，然后再删除div本身：
$scope.remove_div = function(index) {
    $(".slide:nth-child("+(index+1)+")").removeAttr("style") //added this line
    $scope.random_array.splice(index, 1)
}

谢谢，但我还是不明白原因是“因为Angular找不到一个60像素高的div”。例如，我编辑了我的原始问题，如果我将高度设置为60px，然后再设置为30px，它仍然不起作用。我在寻找解决办法的同时，也在努力理解为什么会发生这个问题。