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에서는 볼 수 있습니다.

는 '최대 높이 : 200 픽셀을'이 폐쇄 된 목록

.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; 
} 

또한 최대 높이가 200px입니다. 따라서이 경우 200px에서 200px로 전환하도록 요청할 것입니다. 열린 클래스의 높이를 더 크게 또는 더 작게 변경하십시오. 그러면 전환 될 것입니다.