각도 : 모듈을 포함하지 않고 페이드 인/아웃합니다. NgAnimate

Question

"변경 사항 저장"버튼이있는 양식이 포함 된 작은 웹 앱을 각도로 작성합니다.

빠른 페이드 인/페이드 아웃 애니메이션을 사용하여 올바른 데이터 업데이트를 나타내는 녹색 눈금을 표시하고 싶습니다.

나는 그 애니메이션만을위한 20-ish Kb 모듈을 추가 할 가치가 없다고 생각한다. (나는 다른 부분의 애니메이션을 만들 필요가 없다).

NgAnimate를 포함하지 않고 이와 같은 간단한 애니메이션을 수행 할 수있는 대체 방법이 있습니까? NgAnimate는 "각도 방식"과 일치하는 것이 바람직합니까?

Answer 1

예, CSS 애니메이션 ($timeout 및 ng-class)을 사용할 수있는 방법이 있습니다. 다음은 example입니다.

은 기본적으로 당신은 부모 컨트롤러

ctrl.showCheckmark = function() { 
    ctrl.isShowingCheckmark = true; 

    $timeout(function() { 
     ctrl.isShowingCheckmark = false; 
    }, 2000); 
} 

에 깃발을 전환하고 체크 표시 구성 요소의 변화를 볼.

플래그는 가시성과 페이드 플래그를 설정 변경

:

$digest 이전 완료 및 ng-if="$ctrl.isShowing"을 렌더링하기 위해 기다리는 $timeout를 사용하여

$ctrl.show = function() { 
    $ctrl.isShowing = true; 

    $timeout(function() { 
     $ctrl.fadeIn = true; 
     $ctrl.fadeOut = false; 
    }); 
}; 

.

남은 것은 몇 가지 CSS 애니메이션을 작성하는 것이므로 매우 쉽습니다.