ng-repeat 的角度动画不起作用答案

【问题标题】：Angular Animation for ng-repeat not workingng-repeat 的角度动画不起作用
【发布时间】：2016-03-23 16:28:58
【问题描述】：

我想为我的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

【问题讨论】：

你可以创建一个 jsfiddle 吗？
现在不能，但稍后会尝试这样做。帖子里的信息不够吗？
如果有工作/不工作的例子，它会让每个人都更容易。有时，您会发现，当您将代码剥离到最低限度时，您会在需要提出问题之前发现问题。
我明白了。例如，如果我的路由配置引用了指向单独的 html 文件的模板 URL，我该如何继续使用 JS fiddle？因为只能插入脚本和 css 的链接。
"ngAnimate site" 是关于 Angular 1.1 ...

标签： css angularjs ng-animate

【解决方案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

动画

AngularJS 为 ngRepeat、ngSwitch 和 ngView 等常用指令以及通过 $animate 服务的自定义指令提供动画挂钩。这些动画钩子被设置为在各种指令的生命周期中触发动画，当被触发时，将尝试执行 CSS 过渡、CSS 关键帧动画或 JavaScript 回调动画（取决于动画是否放置在给定指令上） .动画可以使用 vanilla CSS 放置，方法是遵循 AngularJS 设置的命名约定，或者在定义为工厂时使用 JavaScript 代码。

除非您将 ngAnimate 模块作为依赖项包含在应用程序中，否则动画不可用。

【讨论】：