내가 각도에 새로 온 사람 키 프레임

Question

와 AngularJS와 애니메이션 전환을 이해하려고 노력하고 내가 정의를 관리하는 방법 각 이해하려고 노력 중이 야 CSS3 많은 경험을 (내가 백엔드 dev에 해요!)

이 없습니다 css3 키 프레임으로 전환합니다. 나는이 예제를 가지고

#welcome-container.ng-hide { 
    animation:1s mycustomkeyframe; 
    -webkit-animation:1s mycustomkeyframe; 
} 

@keyframes mycustomkeyframe { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-webkit-keyframes mycustomkeyframe { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

:

$scope.test = false; 
// ... doing some things that takes more than 3-4 seconds 
$scope.test = true; 

내 CSS에서 내 컨트롤러

<div id="welcome-container" ng-hide="test"> 
... 
</div> 

: 내 마크 업에서

:

나는이있어 ng-hide-add 및 ng- 숨기기 - 활성 클래스지만 키 프레임에 정말 빠졌습니다. 내 코드는 div를 숨기지 만 어떤 애니메이션도하지 않습니다 !! jquery와 같은 탄성 완화 전환 (jquery : P 제외)을 수행하기 위해 키 프레임을 사용하려고합니다.

아무도 저를 도울 수 있습니까?

Answer 1

이전에는 angular를 사용하지 않았지만 CSS 관점에서는 div에 ng-hide 클래스가 없습니다.

<div id="welcome-container" class="ng-hide" ng-hide="test"> 
Here is a bunch of text blah 
</div> 

JsFiddle

Answer 2

AngularJS와와 CSS3는이 완전히 다른 것을

있습니다 각도는 컨테이너

그 후 ... 그 새로운 CSS를 기반으로 CSS 클래스를 연결하는 데 사용할 수 있습니다

수업 . 당신은 내가 현재 버전에서 키 프레임으로 NG 숨기기 지시어를 애니메이션하는 것은 불가능하다고 생각 ng-class

Answer 3

에 부착 각도에서 CSS

$scope.my_css_clas = 'demo_classs' 

<div ng-class="{{ my_css_clas }}"> 

클래스에서 애니메이션의 시작을 트리거 할 수 있습니다.

다른 클래스를 사용하여 애니메이션을 작성한 다음 애니메이션이 끝날 때 숨기기 작업을 수행하거나 ng-leave와 같은 다른 ng-directive를 사용해야합니다.