Wie benutzt man ngAnimate in ngMessages?

Question

Ich habe ein AngularJS-Formular und ich möchte Animation auf die Fehlermeldungen verwenden. Hier ist der aktuelle Code Ich habe jetzt: ‚aktiv‘

<input type="text" name="name" ng-model="name" required> 

<div class="form-error-cont" ng-messages="form.name.$dirty && form.name.$error"> 
    <p ng-message="required" class="form-err"> 
     <i class="icon-remove"></i> 
     <span class="text">Your name is required.</span> 
    </p> 
</div> 

ich es geschafft haben, Animation auf form-err verwenden würde aber Ich mag das <i> Element und das <span> Element anders animieren, wenn die form-error wird

Im Moment animiert es beide gleichzeitig.

Irgendeine Idee, wie man sie eins nach dem anderen belebt?

Answer 1

Sie können eine Klasse hinzufügen, die das Ereignis auf Winkel aufnehmen und eine bestimmte Animation erstellen. etwas Ähnliches.

.animate-repeat.ng-move, 
.animate-repeat.ng-enter, 
.animate-repeat.ng-leave { 
    transition:all linear 0.5s; 
    backface-visibility: hidden; 

} 
.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:30px; 
} 

und Ihre html

<div class="form-error-cont" ng-messages="form.name.$dirty && form.name.$error"> 
    <p ng-message="required" class="form-err animate-repeat"> 
     <i class="icon-remove"></i> 
     <span class="text">Your name is required.</span> 
    </p> 
</div> 

Sie können die Ereignisse überprüfen und wie sie behandeln hier ngAnimate