为什么ngAnimate不能在div上工作？

Z时代
2024-01-10
分类：问答

因此，在我的webapp中，我有一个包含<div>的列表。我想给他们添加一个不错的动画。所以我开始工作，并将ngAnimate添加到app.js文件。我还将ng-animate="'animate'"添加到<div>。然后我重新加载了我的web应用程序，发现它不起作用。根本没有动画。我使用ngAnimate和AngularJS版本1.2.4为什么ngAnimate不能在div上工作？

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

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

回答：

阅读文档对于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; 
}