css - ng-repeat 的 Angular 动画不起作用

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 文件也链接在我的标题中。

*) 元素链接:https://www.mediafire.com/?6h1qwcrblqczjpr

Answer 1

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

您需要做的就是向预期元素添加一个类，并添加相关的 angualrjs 动画类。

请看下面的代码:

.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.