AngularJS로 div 높이를 변경하는 방법

Question

RSS 피드의 기사 제목이 포함 된 div가 있습니다. 이것은 어떤 피드가보고 있는지, 기사 제목의 길이 등에 따라 div 크기를 동적으로 만듭니다. div 높이의 변경을 here처럼 부드러운 애니메이션으로 만들고 싶습니다. jQuery 대신 angularJS를 사용하는 것을 제외하고는.

내가 각도로했던 유일한 애니메이션은 그래서 희망이뿐만 아니라 것, 매우 간단했다

ng-enter{opacity:0;} ng-enter-active{opacity:1;}

를 사용하여 단지 페이드 인 페이드 아웃 텍스트 유형의 물건입니다.

Answer 1

간단한 예제, ngAnimate 클래스 추가 및 제거의 타고난 모니터링을 기반으로합니다.

.transformable { 
    -webkit-transition: height 100ms linear; 
    -moz-transition: height 100ms linear; 
    -o-transition: height 100ms linear; 
    -ms-transition: height 100ms linear; 
    transition: height 100ms linear; 

} 

.small { 
    height:100px; 
} 

.big { 
    height:300px; 
} 

을하고 사업부를 선언 : 3 개 CSS 클래스를 정의

<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div> 

이 제공해야합니다 당신의 크기 변화하는 클릭에 사업부를 : 각 작은/큰 클래스의 추가/제거를 감지하고 애니메이션을 기반으로 활성화 변환 가능한 CSS 클래스 값. 다른 애니메이션 준비 지침 (예 : ng-repeat)으로 유사한 작업을 수행하거나 맞춤 동작을 만들 수 있습니다. 제시카 빈 (Jessegavin)의 기사는 이것에 대한 좋은 입문서처럼 보입니다.