AngularJS 1.5.6 - ngRepeat Animationen funktionieren nicht

Ich habe einige Probleme, einige ng-repeat Animationen zu arbeiten.AngularJS 1.5.6 - ngRepeat Animationen funktionieren nicht

Ich habe eine Liste in einer Teilansicht, wo ich eine Filterung für die Elemente in einer Liste mache, und ich wollte eine Animation für die Filterung machen, damit es gut aussieht.

Ich habe ein Stylesheet, wo ich eine Animation habe, wenn die Teilansichten ein- und ausgehen und das funktioniert gut. Es ist die Animation für die Liste, die hier nicht arbeiten, sind die Codes:

index.html (wo ich das Stylesheet enthalten):

<!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 (wo ich die ng- wollen Wiederholung Animation Arbeit):

<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 (wo alle Styling, einschließlich der Animationen für, wenn die Teilansichten eingeben, und die Animation geht für die Liste Filterung):

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

war Leitgedanke etwas Ähnliches zu machen, was Sie hier sehen können: http://www.nganimate.org/angularjs/ng-repeat/move

Quelle

2016-07-17 Fer Vargas

Lesen Sie die Kommentare unten, dass Stile so alt sind .. – developer033

Zunächst einmal ich auf der ng-Wiederholung der Klasse zweimal wurde erklärt .. .

Zweitens bemerkte ich, dass aus irgendeinem Grund mit ng-repeat Semantic UI-Klassen auszukommen nicht ..

So entschied ich mich um einen „Container“ zu setzen, was ich wiederholen wollte, fügen ng- wiederhole es und animiere das "container"

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

Quelle

2016-07-18 18:00:52

AngularJS 1.5.6 - ngRepeat Animationen funktionieren nicht

Antwort

Verwandte Themen