Question

所以，在我的webapp中，我有一个由<div>组成的列表。我想为他们添加一个漂亮的动画。所以我开始工作并将ngAnimate添加到app.js文件中。我还在ng-animate="'animate'"添加了<div>。然后我重新加载了我的webapp，看，它没有用。完全没有动画。我正在使用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，因为v1.2 ngAnimate使用不同，你必须指定一个带有animate的类，并在你的css上加上ng-enter或ng-leave，角度服务会添加在dom。中为你上课ng-enter或ng-leave。

为什么ngAnimate不在div上工作？

1 个答案: