爲什麼ngAnimate不能在div上工作？

Question

因此，在我的webapp中，我有一個包含<div>的列表。我想給他們添加一個不錯的動畫。所以我開始工作，並將ngAnimate添加到app.js文件。我還將ng-animate="'animate'"添加到<div>。然後我重新加載了我的web應用程序，發現它不起作用。根本沒有動畫。我使用ngAnimate和AngularJS版本1.2.4

我添加了一些下面的代碼：

<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> 

app.js

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

閱讀文檔對於angular v1.2.4，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; 
} 

如果在documentation自見1.2 ngAnimate使用是不同的，你必須指定一個帶有動畫的類，並在你的css中輸入或輸入 - 離開，角度服務會爲你在dom中的類添加ng-enter或ng-leave。