ngAnimate max-height не работает над определенным элементом

Question

Я реализовал ngAnimate в проекте, чтобы помочь с анимацией, но я получаю действительно странное поведение с определенным элементом.

Чтобы добавить фон, у нас есть магазин с категориями и продуктами внутри категорий. Я делаю ng-repeat с: data-ng-repeat="product in currentProductCategory.Products", и у меня есть data-ng-class="{ 'open': product.ShowDetails == true }" на моем корневом элементе.

Мой корневой элемент также имеет идентификатор product-{{product.Id}}-{{currentProductCategory.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; 
} 

Open:

.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. попробуйте изменить высоту открытых классов, чтобы они были больше или меньше. Тогда это будет переход.