ngAnimate max-height無法處理某些元素

Question

我已經將ngAnimate實現到一個項目來幫助動畫，但我對某個元素的行為非常奇怪。

為了增加一些背景，我們在類別中有一個包含類別和產品的商店。 我正在使用： data-ng-repeat="product in currentProductCategory.Products"並且我的根元素上有data-ng-class="{ 'open': product.ShowDetails == true }" 。

我的根元素也有一個product-{{product.Id}}-{{currentProductCategory.Id}} ID product-{{product.Id}}-{{currentProductCategory.Id}}我有一個帶有id product-options-{{product.Id}}-{{currentProductCategory.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個類別的眾多產品中，每個類別中相同產品的相同產品並非動畫開放。 它使關閉/縮小動畫，但在打開時，它會立即顯示為打開狀態。

這已經給我們很長一段時間了，它已成為一個真正的問題，非常感謝任何幫助。

更新：現在沒有任何“產品”會動畫打開，但它們會關閉動畫。 這可能是因為我在風格而不是類上設置了最大高度？

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。 嘗試將開放類的高度更改為更大或更小。 然后它將過渡。