Question

我已经将ngAnimate实现到一个项目来帮助动画，但是我对某个元素的行为非常奇怪。

要添加一些背景，我们在类别中有一个包含类别和产品的商店。我正在使用：data-ng-repeat="product in currentProductCategory.Products"进行ng-repeat，并且我的根元素上有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;
}

为您的已关闭列表，其中包含'max-height：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。尝试将开放类的高度更改为更大或更小。然后它将过渡。

ngAnimate max-height无法处理某些元素

1 个答案: