AngularJS 1.5.6 - ngRepeat 动画不工作

Question

我在制作一些 ng-repeat 动画时遇到了一些问题。

我在部分视图上有一个列表，我正在对列表中的项目进行一些过滤，我想为过滤制作动画以使其看起来不错。

我有一个样式表，当局部视图进入和离开时我有一个动画，效果很好。它的列表动画不起作用，在这里代码是：

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-repeat 动画起作用的地方）：

<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

Answer 1

首先，我在 ng-repeat 上声明了两次 class...

其次，我注意到语义 UI classes 出于某种原因与 ng-repeat 不兼容..

所以我决定在我想要重复的内容周围放置一个 "container"，向其添加 ng-repeat 并制作动画 "container"

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

AngularJS 1.5.6 - ngRepeat 动画不工作

AngularJS 1.5.6 - ngRepeat animations not working

css

animation

angularjs

ng-repeat

ng-animate