javascript - ngAnimate 最大高度不适用于某些元素

Question

我已经在元素中实现了 ngAnimate 以帮助制作动画，但我在某些元素上遇到了非常奇怪的行为。

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

我的根元素的 ID 还为 product-{{product.Id}}-{{currentProductCategory.Id}}，并且我有一个 id 为 product-options- 的子元素{{product.Id}}-{{currentProductCategory.Id}} 哪些产品预期结果。

当单击按钮时，我调用一个函数，将父元素的最大高度设置为所需的高度，并在 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 个类别的众多产品中，每个类别中的同一个产品没有动画打开。它以动画方式关闭/收缩，但打开时，它会立即显示为打开。

这已经困扰我们很长时间了，并且它正在成为一个真正的问题，非常感谢任何帮助。

更新:现在，所有“产品”都不会以动画方式打开，但它们会以动画方式关闭。这可能是因为我在样式而不是类上设置最大高度吗？

Answer 1

抱歉，这听起来像是我指出了显而易见的事情，我看不到你的其余代码，但在你的 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。尝试将公开课的高度调大或调小。然后它就会转变。