Question

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

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

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

index.html（其中包括样式表）：

  int func(structure1 x){  
    --structVar.h;
    --structVar.m;
    --structVar.s;


  };

selectCourse.html（我想让ng-repeat动画工作）：

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

main.css（所有样式所在的位置，包括部分视图输入时的动画以及列表过滤的动画）：

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

主要想法是制作类似于您在此处看到的内容：http://www.nganimate.org/angularjs/ng-repeat/move

Answer 1

首先，我在ng-repeat上宣布了两次课程......

其次，我注意到由于某种原因，语义UI类与ng-repeat不相符..

所以我决定把一个“容器”放在我想重复的地方，给它添加ng-repeat并为“容器”设置动画

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

AngularJS 1.5.6 - ngRepeat动画不起作用

1 个答案: