動畫每個NG重複itineration

Question

你好，我一直停留在這整個上午，我想爲每一個我NG-重複生成塊的動畫，我不能讓它工作

下面是HTML ：

<div class="blocks-container" ng-init="loadProjects()" ng-controller="buildMonitorController"> 
<div class="row"> 
    <div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block" 
      ng-repeat="build in builds.builds.build | orderBy:'lastBuildDetails.startDate' : true" 
      ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" 
      ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}" 
      id="{{build._id}}"> 
      <div class="title-container"><p>{{build._buildTypeId}}</p></div> 
      <div class="update-container col-xs-12"> 
      <time>{{ build.lastBuildDetails.startDate | date : 'dd.MM.yyyy H:mm:s'}}</time> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Start error state dialog --> 
<div ng-include src="'views/main/error-dialog.html'"></div> 

編輯我，已經改變了NG-動畫這樣：

ng-animate="{enter: 'block-enter'}" style="transition-delay:500ms" 

開創了CSS文件下列規則：

.block-enter { 
    opacity:0; 
    -webkit-transition-property: all; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 400ms; 
} 
.block-enter.block-enter-active { 
    opacity: 1; 
} 

但仍然沒有工作:(

Answer 1

我回答我的問題的人有同樣的問題，可以修復它。 在AngularJS 1.3.15 NG-動畫已經過時，如果你想使用的動畫簡單地創建在CSS動畫，並將其添加到類：

這裏是我的代碼，用它作爲例子： 我使用類動畫爲動畫

HTML：

<div class="blocks-container" ng-init="loadProjects()" ng-controller="buildMonitorController"> 
<div class="row"> 
    <!-- <div> --> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate" 
      ng-repeat="build in builds.builds.build track by build._id | orderBy:'lastBuildDetails.startDate' : true" 
      ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}" 
      id="{{build._id}}"> 
      <div class="title-container"><p>{{build._buildTypeId}}</p></div> 
      <div class="update-container col-xs-12"> 
      <time>{{ build.lastBuildDetails.startDate | date : 'dd.MM.yyyy H:mm:s'}}</time> 
      </div> 
     </div> 
    <!--</div>--> 
</div> 
<!-- Start error state dialog --> 
<div ng-include src="'views/main/error-dialog.html'"></div> 

CSS：

//Animation V3///////////////////////////////// 
.animate.ng-move, 
.animate.ng-enter, 
.animate.ng-leave { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.animate.ng-leave.ng-leave-active, 
.animate.ng-move, 
.animate.ng-enter { 
    opacity:0; 
    //max-height:0; 
} 

.animate.ng-leave, 
.animate.ng-move.ng-move-active, 
.animate.ng-enter.ng-enter-active { 
    opacity:1; 
    //max-height:40px; 
} 

/** 
* Stagger Leave (hide) animation 
*/ 
.animate.ng-leave-stagger { 
    /* this will have a 100ms delay between each successive leave animation */ 
    -webkit-transition-delay: 0.2s; 
    transition-delay: 0.2s; 

    /* in case the stagger doesn't work then these two values 
    must be set to 0 to avoid an accidental CSS inheritance */ 
    -webkit-transition-duration: 0s; 
    transition-duration: 0s; 
} 

/** 
* Stagger ENTER ANIMATION 
*/ 
.animate.ng-enter-stagger { 
    /* this will have a 100ms delay between each successive enter animation */ 
    -webkit-transition-delay: 0.2s; 
    transition-delay: 0.2s; 

    /* in case the stagger doesn't work then these two values 
    must be set to 0 to avoid an accidental CSS inheritance */ 
    -webkit-transition-duration: 0s; 
    transition-duration: 0s; 
} 

個

AngularJS模塊：

var app = angular.module('saTeamcityBuildMonitorAngularWebApp', ['buildMonitor-controller', 'cb.x2js','countdown-controller','ngAnimate']);