AngularJS 1.5.6 - анимация ngRepeat не работает

У меня возникли проблемы с созданием анимации ng-repeat.AngularJS 1.5.6 - анимация ngRepeat не работает

У меня есть список на частичном изображении, где я делаю фильтрацию для элементов в списке, и я хотел сделать анимацию для фильтрации, чтобы она выглядела красиво.

У меня есть таблица стилей, где у меня есть анимация, когда частичные представления входят и уходят, и это хорошо работает. Его анимация для списка, которые не работают, здесь являются коды:

index.html (Где я включаю таблицы стилей):

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "UTF-8"> 

     <!--Mandatory links for styles and scripts--> 
     <link rel = "stylesheet" type = "text/css" href = "external/semantic/semantic.css"> 

     <script type = "text/javascript" src = "external/js/jquery.min.js"></script> 
     <script type = " text/javascript" src = "external/js/jquery.md5.js"></script> 
     <script type = "text/javascript" src = "external/semantic/semantic.js"></script> 

     <script type = "text/javascript" src = "external/angular-1.5.6/angular.js"></script> 
     <script type = "text/javascript" src = "external/angular-1.5.6/angular-route.js"></script> 
     <script type = "text/javascript" src = "external/angular-1.5.6/angular-messages.js"></script> 
     <script type = "text/javascript" src = "external/angular-1.5.6/angular-animate.js"></script> 
     <script type = "text/javascript" src = "external/angular-1.5.6/angular-resource.js"></script> 

     <!--Own scripts and styles--> 
     <link rel = "stylesheet" type = "text/css" href = "app/styles/main.css"> 

     <script type = "text/javascript" src = "app/modules.js"></script> 
     <script type = "text/javascript" src = "app/configs/mainRoutes.js"></script> 
     <script type = "text/javascript" src = "app/controllers/loginController.js"></script> 
     <script type = "text/javascript" src = "app/controllers/courseController.js"></script> 
     <script type = "text/javascript" src = "app/services/backendServices.js"></script> 
    </head> 
    <body data-ng-app = "helperApp"> 
     <div data-ng-view id = "mainViews"></div> 
    </body> 
</html>

selectCourse.html (Где я хочу ng- повторение анимации работы):

<div class = "ui container"> 
<h1 class = "ui center aligned header" id = "holaHeader">Hola</h1> 
<h1 class = "ui center aligned header">Parece que no tienes cursos todavía...</h1> 

<h1 class = "ui center aligned header">Ingresa un nuevo curso</h1> 

<div class = "ui segments"> 
     <form ng-submit = "addCourse(courseName)"> 
     <div class="ui fluid icon input"> 
      <input type="text" placeholder="Nombre de nuevo curso..." ng-model = "courseName"> 
      <i class="search icon"></i> 
     </div> 
     </form> 
</div> 

<h1 class = "ui center aligned header">...o selecciona un curso en el cual trabajar</h1> 

<div class="ui middle aligned selection list"> 
    <div class="item" class = "animate-repeat" ng-repeat = "course in courses | filter : courseName"> 
    <i class = "student icon"></i> 
    <div class="content"> 
     <div class="header">{{course.courseName}}</div> 
    </div> 
    </div> 
</div>

main.css (Где все стилизация идет, в том числе анимации для когда частичные ввода и анимации для фильтрации списка):

body { 
    background-color: #DADADA; 
} 

.column { 
    max-width: 450px; 
    margin-top: 150px; 
} 


#holaHeader { 
    margin-top: 3.5em; 
} 

/*Partials enter and leave animations*/ 

@keyframes appear { 
    from { 
     opacity: 0; 
    } 

    to { 
     opacity: 1; 
    } 
} 

@keyframes disappear { 
    from { 
     opacity: 1; 
    } 

    to { 
     opacity: 0; 
    } 
} 



#mainViews.ng-enter { 
    animation: 2s appear; 
} 

#mainViews.ng-leave { 
    animation: 0.3s disappear; 
} 

/*Select course animations*/ 

.animate-repeat { 
    line-height:40px; 
    list-style:none; 
    box-sizing:border-box; 
} 

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

Основная идея состояла в том, чтобы сделать что-то подобное тому, что вы можете увидеть здесь: http://www.nganimate.org/angularjs/ng-repeat/move

источник

2016-07-17 Fer Vargas

Прочтите комментарии ниже, что стили настолько стары. – developer033

Прежде всего, я объявлял класс дважды на нг-повтор .. .

Во-вторых, я заметил, что семантические классы пользовательского интерфейса не ладят с нг-повторе по какой-то причине ..

Так что я решил поставить «контейнер» вокруг того, что я хотел бы повторить, добавить ng- повторить к нему и оживить, что «контейнер»

<div class = "animate-repeat" ng-repeat = "course in courses"> 
    <div class = "item"> 
     ... 
    </div> 
</div>

источник

2016-07-18 18:00:52

AngularJS 1.5.6 - анимация ngRepeat не работает

ответ

Смежные вопросы