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

<强>动画

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

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

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

1 个答案: