Angular ng-repeat 的动画不工作

Question

我想为我的 ng-repeat 生成的项目做一个简单的淡入动画，我遵循了 ngAnimate site 上的所有说明，但仍然没有骰子。

这是我的模块

var app = angular.module('testApp', ['ngRoute','ngAnimate']);

这是我标记中的 ng-repeat

<div class="col-md-6 col-xs-12" ng-repeat="mark in marks" ng-animate="'animate' ">
  <div class="col-md-12 well well-sm" >
    <div data-ng-include="'./Partials/mark.html'" />
  </div>
</div>

这里有一些CSS的动画

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}
.animate-enter.animate-enter-active {
    opacity: 1;
}

这是我要包含的脚本

<!-- JS -->

<!-- Vendor Libs -->
<script src="./js/angular.min.js"></script>
<script src="./js/angular-animate.min.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/jquery.min.js"></script>

<!-- UI Libs -->
<script src="./js/bootstrap.min.js"></script>

<!-- App libs -->
<script src="./js/app.js"></script>
<script src="./Controllers/MarksController.js"></script>
<script src="./Controllers/ViewMarkController.js"></script>
<script src="./Services/marksService.js"></script>

*) 所有需要的 CSS 文件也链接在我的 header.

*) Link 到项目：https://www.mediafire.com/?6h1qwcrblqczjpr

Answer 1

您不需要 ng-animate="'animate'" 指令。

您需要做的就是向预期项目添加 class，并添加相关的 angualrjs 动画 classes.

请看下面的代码：

.animate-repeat {    
    -webkit-transition: 1s linear all;
    transition: 1s linear all;
}

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

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

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

HTML:

<div ng-controller="RestaurantsController">
    <input type="text" ng-model="search_cat.name">
    <br>
    <b>Category:</b>
    <div ng-repeat="cat in cuisines">
        <b><input type="checkbox" ng-model="cat.checked" /> {{cat.name}}</b>
    </div>
    <hr />
    <div ng-repeat="w in filtered=(restaurants | filter:filterByCategory) " class="animate-repeat">
        {{w.name}}
    </div>
    <hr /> Number of results: {{filtered.length}}
</div>

请查看工作示例here

来自source

Animations

AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code when it's defined as a factory.

Animations are not available unless you include the ngAnimate module as a dependency within your application.

Angular ng-repeat 的动画不工作

Angular Animation for ng-repeat not working

css

angularjs

ng-animate