Угловая анимация для ng-repeat не работает

Question

Я хотел бы сделать простое затухание в анимации для предметов, которые генерирует мой ng-repeat, я выполнил все инструкции на ngAnimate site, но все равно не кубиками.

Вот мой модуль

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

Вот в моей разметке

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

Здесь ng-repeat некоторая CSS для анимации

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

А вот сценарии I» м, включая

<!-- 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 (в зависимости от того, включена ли анимация в данную директиву) , Анимации можно разместить с помощью ванильного CSS, следуя соглашениям об именах, установленным на месте AngularJS или с кодом JavaScript, когда он определен как фабрика.

Анимация недоступна, если вы не включили модуль ngAnimate в качестве зависимости в своем приложении.