Angular fadein 및 fadeout - CSS가없는 표준 방법?

Question

나는 jquery와 비교하여 각도로 애니메이션을 만드는 것이 매우 어렵다. 각도 애니메이션 fadein 및 fadeout의 많은 버전이 블로그/자습서/등에서 찾았습니다. 그 중 일부는 이전 버전의 각도에 있습니다. Angular 's는 이전 버전을 대체하기 위해 새로운 버전이 나올 때 매우 일관성이없는 것처럼 보입니다. 나는 그것을하는 표준 방법을 볼 수 없다. 그러므로 나는 어디서부터 시작해야할지 모른다.

버튼을 클릭 할 때 양식이나 html 문서로 페이드 아웃하기 만하면됩니다.

HTML,

<button ng-click="loadInclude" >Load Include Form</button> 
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div> 

각도,

var app = angular.module("myapp", ['ngAnimate']); 

    app.controller("FormController",function($scope) { 

      $scope.readyToLoadForm = false; 
      $scope.loadInclude = function(e) { 
       $scope.readyToLoadForm = true; 
      }; 
     } 
    ); 

어떤 아이디어가? 표시 및 숨기기 때이 항목에 angular-animate.js 각도 의지 add 및 remove 여러 클래스를 사용할 때

Answer 1

당신은이 경우

<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div> 

에 ng-show 또는 ng-hide를 사용할 수 있습니다. 해당 클래스를 기반으로 요소에 CSS 애니메이션을 설정할 수 있습니다.

여기

ng-leave.ng-leave-active.ng-enter-active 클래스 요소에 추가 ng-include 애니메이션 간단한 plunker

---

이다. 애니메이션을 적용 할 때 추가 된 클래스에 대해 약간의 설명이 있습니다. 그 DESC 여기 ngAnimate

에서 인 ng-enter 데모 여기 Plunker

---

클래스는 요소에 할당하는 방법에 대한 것이다 reference에게 때 AngularJS와