각도 : 요소를 페이드 아웃 한 다음 디스플레이를 설정하지 않음

Question

요소를 클릭하면 다른 요소를 먼저 페이드 아웃 한 다음 표시하도록 설정합니다.

부분 :

<div class="main_menu_image" ng-class="{ fadeOut : MenuOpen==true }" /></div> 

<div class="button" ng-click="ActivateMenu()"></div> 

그런 다음 내 컨트롤러에서 : 나는 버튼을 클릭하면

$scope.MenuOpen = false; 

    $scope.ActivateMenu = function(){ 
    $scope.MenuOpen = $scope.MenuOpen === false ? true: false; 
    } 

그래서, 요소 main_menu_image 클래스 fadeOut를 얻을 수

나는 다음과 같은 코드가 있습니다. 이제는 사라집니다. 그러나 페이딩 애니메이션이 완료된 후 main_menu_image에서 none으로 디스플레이를 설정하여 완전히 숨겨집니다.

jQuery를 사용하고 싶지 않습니다. 이 작업을 수행 할 각도 승인 된 방법이 있습니까?

Answer 1

예는 할 :) 처럼 스 베인 당신이 ng-show을 사용할 수 있습니다 말한다 매우 쉽게, 그리고 당신이 ng-hide를 사용할 수 있습니다.

Working fiddle here

이 즉시 비록 일을 숨 깁니다. 하지만 예를 들어 $timeout 서비스를 통해 시간 초과를 설정하고 숨기기를이 방식으로 설정할 수 있습니다.

ng-if을 사용할 수도 있습니다.이 경우 display : none을 설정하는 대신 조건이 충족되지 않으면 실제로 DOM에서 요소가 제거됩니다.

업데이트 : 놀라운Here's a more proper fiddle showcasing what you're trying to do

Answer 2

ngShow를 사용할 수 있습니다. ngAnimate 모듈을 사용하면 대부분의 기본 제공 Angular 지시어에 대한 애니메이션 지원 기능이 내장됩니다.

자세한 내용은 여기를 참조하십시오 : https://docs.angularjs.org/guide/animations