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

Question

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

Answer 1

@snookieordie 请看一下 Fiddle 的这项工作。我认为你在没有动画的情况下删除 div 和 1 秒中断的问题是因为 Angular 无法根据你现有的 [=14] 找到高度为 60px 的 div =] class 是。我刚刚更改了 css classes on height toggle.

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 优先级高于 class，所以 .ng-leave 和 .ng-leave.ng-leave-active 添加时不会影响 div 的高度。

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

为了解决这个问题，我在删除 div 本身之前删除了 div 的样式属性：

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

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

ng-leave animation doesn't work after height of div is modified

javascript

jquery

angularjs

ng-animate