perché non l'ng-congedo/ng-ENTER classi vengono aggiunti

Question

Secondo la documentazione angolari https://docs.angularjs.org/api/ng/directive/ngRepeat#animations

" .enter - quando un nuovo articolo viene aggiunto alla lista o quando un elemento è rivelato dopo un filtro

.leave - quando un elemento è ancora rimosso dall'elenco o quando un elemento è filtrato"

, quando .push ({}) o .splice (-1 1) da un array, ne nessuna di queste classi viene aggiunta alla ng-repeat. qual è il problema?

<div ng-controller="MyCtrl"> 
    <button ng-click="addLine()"> 
    add 
    </button> 
    <button ng-click="removeLine()"> 
    remove 
    </button> 
    <div ng-repeat="line in lines"> 
     <div class="preview">{{$index}}</div> 
    </div> 
</div> 
var myApp = angular.module('myApp', ['ngAnimate']); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
     $scope.addLine = function(){ 
     $scope.lines.push({}) 
    } 
    $scope.removeLine = function(){ 
     $scope.lines.splice(-1, 1) 
    } 
    $scope.lines = [{ 
     text: 'res1'}, 
    { 
     text: 'res2'}]; 
} 

come Ted ha osservato nella sua risposta, avendo gli stili CSS effettivo per .NG-enter/.NG-congedo è richiesto, altrimenti il ​​modulo ngAnimate non aggiungerà le classi .NG immettere agli elementi DOM

Per essere più chiari, non mi interessa fare un'animazione in questo momento. Il problema per me è che il .NG immettere classi in realtà non vengono applicate per l'attributo class di un elemento a meno che non si dispone di stili CSS per .NG immettere

LAVORO PLUNKER http://plnkr.co/edit/TqpdIy6syikBhAeb5Kw3?p=preview

Answer 1

Per aggiungere queste classi devi caricare il modulo di animazione nella tua app.

Vedere the ngAnimate docs per come procedere.

In primo luogo è necessario caricare il modulo aggiuntivo di file .js:

<script src="angular.js"> 
<script src="angular-animate.js"> 

Poi elencare come modulo dipendente della vostra applicazione:

angular.module('app', ['ngAnimate']); 

Il modulo ngAnimate anche richiede l'elemento da avere la sua transizione definita nel CSS o nel JS:

Per le transizioni CSS, il codice di transizione deve essere definito all'interno della classe CSS iniziale (in questo caso .ng-enter). La classe di destinazione è ciò verso cui animerà la transizione.

se si aggiunge qualcosa di simile:

/* The starting CSS styles for the enter animation */ 
.fade.ng-enter { 
    transition:0.5s linear all; 
    opacity:0; 
} 

/* The finishing CSS styles for the enter animation */ 
.fade.ng-enter.ng-enter-active { 
    opacity:1; 
} 

Dovrebbe iniziare a lavorare.

Per essere molto chiari, perché i documenti non lo dicono esplicitamente: se l'animazione non è definita né nel CSS né nel JS, il modulo ngAnimate non aggiungerà nemmeno le classi, salterà semplicemente l'animazione tutti insieme.