div에서 ngAnimate가 작동하지 않는 이유는 무엇입니까?

Question

내 webapp에는 <div>으로 구성된 목록이 있습니다. 나는 그들에게 멋진 애니메이션을 추가하고 싶다. 그래서 저는 일을 시작하고 ngAnimate을 app.js 파일에 추가했습니다. 또한 <div>에 ng-animate="'animate'"을 추가했습니다. 나는 그때 내 webapp을 다시로드하고, 그것은 작동하지 않습니다. 애니메이션이 전혀 없습니다. 내가 ngAnimate 및 AngularJS와 버전 1.2.4

를 사용하고 나는 아래의 코드 일부 추가 : app.js

<div class="col-use-list sidebar"> 
    <div class="col-md-12 sidebar-element" 
     ng-animate="'animate'" 
     ng-repeat="song in songs | orderBy:[filter]:reverse" 
     style="margin-bottom: 10px;"> 

     <div class="col-use-artwork" 
      style="padding-left: 0px;"> 
      <img alt="{{ song.name }}" 
       src="img/artwork/{{ song.image }}.png" 
       class="sidebar-song-image">    
     </div> 

     <div class="col-use-name">  
      <p>{{ song.name }}</p>    
     </div> 

     <div class="col-use-select">   
      <input type="radio" 
        name="checkbox" 
        ng-value="song.image" 
        id="{{ song.image }}" 
        class="sidebar-checkbox" /> 
      <label for="{{ song.image }}" class="sidebar-checkbox-label"></label>    
     </div>    
    </div> 

    <div style='clear:both;height: 0;'></div> 
</div> 

을

var SongApp = angular 
    .module('SongApp', 
     [ 
      "ui.router", 
      "ngUpload", 
      "pascalprecht.translate", 
      "ngAnimate" 
     ]); 

CSS

.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position: relative; 
    display: block; 
} 

.animate-leave.animate-leave-active, 
.animate-enter { 
    -webkit-transform: scaleY(0); 
    -moz-transform: scaleY(0); 
    -ms-transform: scaleY(0); 
    -o-transform: scaleY(0); 
    transform: scaleY(0); 
    height: 0px; 
    opacity: 0; 
} 

.animate-enter.animate-enter-active, 
.animate-leave { 
    -webkit-transform: scaleY(1); 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -o-transform: scaleY(1); 
    transform: scaleY(1); 
    height: 30px; 
    opacity: 1; 
} 

Answer 1

문서 읽기 n을 사용하면 ng-animate 서비스가 다르기 때문에 이제 일반 클래스로 애니메이션을 사용하여 클래스를 지정해야합니다.

그래서 시도이 :

HTML :

<div class="col-use-list sidebar"> 
    <div class="col-md-12 sidebar-element animate" 
     ng-repeat="song in songs | orderBy:[filter]:reverse" 
     style="margin-bottom: 10px;"> 

     <div class="col-use-artwork" 
      style="padding-left: 0px;"> 
      <img alt="{{ song.name }}" 
       src="img/artwork/{{ song.image }}.png" 
       class="sidebar-song-image">    
     </div> 

     <div class="col-use-name">  
      <p>{{ song.name }}</p>    
     </div> 

     <div class="col-use-select">   
      <input type="radio" 
        name="checkbox" 
        ng-value="song.image" 
        id="{{ song.image }}" 
        class="sidebar-checkbox" /> 
      <label for="{{ song.image }}" class="sidebar-checkbox-label"></label>    
     </div>    
    </div> 

    <div style='clear:both;height: 0;'></div> 
</div> 

CSS :

.animate.ng-enter, 
.animate.ng-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position: relative; 
    display: block; 
} 

.animate.ng-leave, animate.ng-leave-active, 
.animate.ng-enter { 
    -webkit-transform: scaleY(0); 
    -moz-transform: scaleY(0); 
    -ms-transform: scaleY(0); 
    -o-transform: scaleY(0); 
    transform: scaleY(0); 
    height: 0px; 
    opacity: 0; 
} 

.animate.ng-enter, animate.ng-enter-active, 
.animate.ng-leave { 
    -webkit-transform: scaleY(1); 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -o-transform: scaleY(1); 
    transform: scaleY(1); 
    height: 30px; 
    opacity: 1; 
} 

당신은 1.2 버전 ngAnimate 사용이 다르기 때문에, 사용자가 지정해야하는 documentation에 표시되는 경우 animate 클래스를 사용하고 CSS에 ng-enter 또는 ng-leave를 추가하면 각도 서비스가 dom에 클래스를 추가하거나 ng-leave를 추가합니다.