javascript - ngAnimate max-height在某些元素上不起作用

我已经将ngAnimate实现到一个项目中以帮助动画，但是对于某个元素，我的行为确实很奇怪。

为了增加一些背景，我们开设了一家商店，其中包含类别和类别内的产品。我正在执行ng-repeat：data-ng-repeat="product in currentProductCategory.Products"并且我的根元素上有data-ng-class="{ 'open': product.ShowDetails == true }"。

我的root元素的ID也为product-{{product.Id}}-{{currentProductCategory.Id}}，而我的子元素的ID为product-options-{{product.Id}}-{{currentProductCategory.Id}}，可以产生预期的结果。

单击按钮时，我调用一个函数，将父元素上的max-height设置为所需的高度，然后在CSS中处理动画。这是功能代码：

var reg = /\d+/g;
var productParentElement = $('#product-' + product.Id + '-' + $scope.currentProductCategory.Id);
var optionsElement = $('#product-options-' + product.Id + '-' + $scope.currentProductCategory.Id);

var productParentPaddingTop = parseInt(productParentElement.css("padding-top").match(reg));
var productParentPaddingBottom = parseInt(productParentElement.css("padding-bottom").match(reg));
var productParentTotalHeight = productParentPaddingTop + productParentPaddingBottom + productParentElement.height() + optionsElement.height();

var optionsElementPaddingTop = parseInt(optionsElement.css("padding-top").match(reg));
var optionsElementPaddingBottom = parseInt(optionsElement.css("padding-bottom").match(reg));
var optionsElementTotalHeight = optionsElementPaddingTop + optionsElementPaddingBottom + optionsElement.height();

var totalHeight = productParentTotalHeight + optionsElementTotalHeight;

if (product.ShowDetails) {
    product.ShowDetails = true;
    productParentElement.css("max-height", totalHeight);
} else {
    product.ShowDetails = false;
    productParentElement.removeAttr('style');
}

和我的封闭和开放类的CSS：

关闭：

.products-list .product {
    margin-bottom: 20px;
    max-height: 200px;
    overflow: hidden;
    -moz-transition: max-height 2s ease;
    -o-transition: max-height 2s ease;
    -webkit-transition: max-height 2s ease;
    transition: max-height 2s ease;
}

打开：

.products-list .product.open {
    -moz-transition: max-height 2s ease;
    -o-transition: max-height 2s ease;
    -webkit-transition: max-height 2s ease;
    transition: max-height 2s ease;
    max-height: 200px;
}

问题在于，在4个类别的许多产品中，每个类别中的同一产品和同一产品的动画没有打开。它会为关闭/收缩动画，但是在打开时，它会立即显示为打开状态。

长期以来，这一直困扰着我们，这已成为一个现实问题，我们将不胜感激。

更新：现在所有“产品”都不会设置动画，但是它们会关闭动画。难道是因为我要在样式而不是类上设置最大高度吗？

最佳答案

抱歉，这听起来像是我指出了显而易见的内容，但看不到其余的代码，但是在CSS中，您已经找到了；

.products-list .product {
    margin-bottom: 20px;
    max-height: 200px;
    overflow: hidden;
    -moz-transition: max-height 2s ease;
    -o-transition: max-height 2s ease;
    -webkit-transition: max-height 2s ease;
    transition: max-height 2s ease;
}

对于您的已关闭列表，该列表的最大高度为200px，但在打开列表中也相同；

.products-list .product.open {
    -moz-transition: max-height 2s ease;
    -o-transition: max-height 2s ease;
    -webkit-transition: max-height 2s ease;
    transition: max-height 2s ease;
    max-height: 200px;
}

最大高度也为200px。因此，在这种情况下，您要求它从200px过渡到200px。尝试将开放类的高度更改为更大或更小。然后它将过渡。

关于javascript - ngAnimate max-height在某些元素上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38051192/