Question

大家好我整个上午都被困在这里，我想为每个用ng-repeat生成的块制作一个动画，我不能让它工作

这是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中创建一个动画并将其添加到类中：

这是我的代码使用它作为示例：我使用动画类动画

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

动画每个ng重复的过程

1 个答案: