2016-11-15 3 views
1

"변경 사항 저장"버튼이있는 양식이 포함 된 작은 웹 앱을 각도로 작성합니다.각도 : 모듈을 포함하지 않고 페이드 인/아웃합니다. NgAnimate

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

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

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

+0

http://plnkr.co/edit/vfrmmuGjsIfsdhnLj87O?p=preview? 어느 것이 http://stackoverflow.com/questions/29323044/doing-animation-with-ng-show-without-nganimate – dstarh

+0

에서 왔지만 그 코드에는 angular-animate.js가 포함되어 있습니까? 스크립트를 제거하면 코드가 작동하지 않습니다. – Sebastianb

+0

Doh 나는 그걸 놓쳤다. 그 대답은 NG-animate – dstarh

답변

1

예, CSS 애니메이션 ($timeoutng-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 애니메이션을 작성하는 것이므로 매우 쉽습니다.

+0

당신의 대답의 변종을 사용하여 끝났지 만, 그것은 시간 초과 기능, 클래스 및 CSS를 사용하여 종기가 있습니다. 고맙습니다! – Sebastianb