Ng 각도로 애니메이션 적용

Question

애니메이션 효과로 div를 표시해야합니다.

<div class="appdrawer pull-right tab-{{ showDetails }}" data-ng-click="showDetails = !showDetails; showDetails1 = false; showDetails2 = false;" >Apps</div> 


<section id="workbench-apps" data-ng-class="{ 'hidden': ! showDetails }" data-ng-animate=" 'animate' "> 
     <div class="rowfluid"> 
      Apps 
      <div class="applist" data-ng-repeat="applist in applists">{{ name }}</div> 

     </div> 

    </section> 

CSS

.animate,.animate-enter { 
    -webkit-transition: 1s linear all; /* Chrome */ 
    transition: 1s linear all; 
    opacity: 0; 
    } 

    .animate-enter.animate-enter-active { 
    opacity: 1; 
    } 

나는 상기 코드했지만, 작동하지 않는, PLS 내지 An 애니메이션을 추가

Answer 1

ngAnimate는 (적어도 1.1.5에) 사용되는 각 방법을 제안 기존 지시어. ngAnimate documentation을 확인하면 지원되는 명령어 목록을 볼 수 있습니다. 이 지시어 중 하나와 함께 사용하면 애니메이션을 얻을 수 있습니다.

또한 "애니메이션 효과"라는 애니메이션을 사용하도록 지정했습니다. 실제로 CSS에서 그 이름을 가진 애니메이션을 정의해야합니다.

Answer 2

Jon7이 언급했듯이 ngClass와 함께 ngAnimate를 Angular 1.1.5로 사용할 수 없습니다. 그래도 사용할 수 있습니다.

또한 Angular 1.2 ngClass 기반 애니메이션이 작동합니다. Year of Moo는 샘플을 사용하여 훌륭한 글을 올렸습니다. http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html