CSS 애니메이션을 사용한 간단한 AngularJS

온라인 튜토리얼을 읽었지만 크로스 브라우저 작동 예제를 함께 사용할 수 없습니다.CSS 애니메이션을 사용한 간단한 AngularJS

HTML :

<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>

CSS :

/* ANIMATIONS */ 

.drop-down { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    -ms-transition:  all linear 1s; 
    -o-transition:  all linear 1s; 
    transition:   all linear 1s; 

    line-height: 100%; 

} 

.drop-down.ng-enter, 
.drop-down.ng-leave-active { 
    opacity: 0; 
    max-height: 0px; 
} 

.drop-down.ng-enter-active, 
.drop-down.ng-leave { 
    opacity: 1; 
    max-height: 100%; 
}

내가 달성하고자하는 것은, 템플릿이로드 될 때 NG-포함, 그것은 0에서 100 불투명도에 페이드 있다는 것입니다 및 동시에 드롭 다운처럼 열립니다 (0부터 시작하여 필요한 전체 높이까지). 양식이 숨겨지면 그 반대도 마찬가지입니다.

불투명도는 이미 작동하지만 높이를 변경하지 않으면 즉시 div가 전체 높이로 나타납니다. 크로스 브라우저 솔루션으로 CSS를 구축 할 수 있습니까?

출처

2014-09-15 tomazahlin

사용 높이 ... –

나는 픽셀을 사용할 수 없습니다. 나 또한 라인 높이를 0에서 100 %까지 시도했지만 작동하지 않는 것 같습니다. – tomazahlin

ng-animate shot http://www.nganimate.org/ – fauverism

.drop-down 클래스에서 max-height을 px로 정의해야 작동합니다.
어쨌든 높이를 정의하지 않으므로 높은 값을 max-height에 px로 입력 할 수 있습니다.

도 .drop-down에 overflow: hidden을 정의하여 내용이 높이의 전환시 숨겨집니다.

나를 위해 일했습니다. 여기
예 데모 : - 나는 요소가 얼마나 높이를 알 수 없기 때문에 픽셀 http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview

출처

2014-09-15 13:46:47

CSS 애니메이션을 사용한 간단한 AngularJS

답변

관련 문제