Animate Каждой нг-повтор странствование

Question

Здравствуйте, я застряли на этом все утро, я хочу сделать анимацию для каждого блока, который я генерировать с нг-повтором, я не могу сделать это работает

вот 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-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 нг-одушевленный осуждаются, если вы хотите использовать анимацию просто создать анимацию в 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']);