Comment utiliser ngAnimate dans ngMessages?

Question

J'ai un formulaire AngularJS et j'aimerais utiliser l'animation sur les messages d'erreur. Voici le code actuel, j'ai en ce moment:

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

J'ai réussi à utiliser l'animation sur form-err mais je voudrais animer l'élément différemment <i> et l'élément <span>, lorsque le form-error devient « actif ».

En ce moment, il les anime tous les deux à la fois.

Une idée de comment les animer un par un?

Answer 1

Vous pouvez ajouter une classe qui capture l'événement sur angulaire et effectuer une animation spécifique. quelque chose de similaire à cela.

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

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

Vous pouvez vérifier les événements et la façon de les traiter ici ngAnimate