Löschen Element von ng-Wiederholung, die eine Übergangsanimation hat

Question

Ich habe eine Reihe von Elementen in ng-repeat. Dieses übergeordnete Element verfügt auch über eine Hintergrundübergangsanimation mit einer Dauer von 1 Sekunde.

Wenn ich das Element mit splice lösche, dauert es 1 Sekunde, um es von der Benutzeroberfläche zu entfernen. (Basierend auf der Zeit, die ich für die Übergangsdauer gebe)

Ich möchte keine weitere Klasse hinzufügen, um den Übergang zuerst zu entfernen und dann zu löschen. Oder ist das der einzige Weg?

<div class="MyTransitionClass" ng-repeat="d in myArray">  
    {{d.Value}} 
    <button type="button" class="CloseIcon" ng-click="DeleteItem($index)">DELETE</button> 
</div> 

.MyTransitionClass { 
    transition: background-color ease-in 1s; 
    -webkit-transition: background-color ease-in 1s; 
} 

Answer 1

Probieren Sie es aus wie dieses https://docs.angularjs.org/api/ngAnimate

.MyTransitionClass.ng-enter { 
    transition: background-color ease-in 1s; 
    -webkit-transition: background-color ease-in 1s; 
} 

Arbeiten jsfiddlehttp://jsfiddle.net/irhabi/3fgtqwgq/