修改div高度后ng-leave动画不起作用答案

【问题标题】：ng-leave animation doesn't work after height of div is modified修改div高度后ng-leave动画不起作用
【发布时间】：2015-12-29 08:55:38
【问题描述】：

我使用 ng-repeat 堆叠了几个 div，并且我正在使用 ng-leave 以便在删除 div 时，它的高度转换为 0px。

这一切都很好。

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

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

【问题讨论】：

标签： javascript jquery angularjs ng-animate

【解决方案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
    }

【讨论】：

谢谢，但我仍然对“因为 Angular 无法找到高度为 60px 的 div”的原因感到困惑。例如，当我编辑了我的原始问题时，如果我将高度设置为 60 像素，然后再回到 30 像素，它仍然不起作用。我正在努力理解为什么会发生这个问题，就像我正在寻找解决方法一样。

【解决方案2】：

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

问题实际上是 CSS 优先级之一。 .animate() 为受影响的 div 添加了一个内联样式属性，因此当我为 div 设置动画时，它的 style 属性设置为 30px 的 height。因为内联样式的 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)
}

【讨论】：