javascript - 动画每个 ng-repeat 迭代

Question

你好，我整个早上都被困在这个问题上，我想为我用 ng-repeat 生成的每个 block 制作一个动画，我无法让它工作

这是 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 更改为:

  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-animate 已被弃用，如果你想使用动画，只需在 css 中创建一个动画并将其添加到类中:

这是我的代码，以它为例: 我使用动画类 animate

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']);