How to use ngAnimate inside ngMessages?

Question

I have an AngularJS form and I'd like to use animation on the error messages. Here is the current code I have right now:

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

I have managed to use animation on form-err however I would like to animate the <i> element and the <span> element differently, when the form-error becomes 'active.'

Right now it's animating both of them at once.

Any idea how to animate them one by one?

Answer 1

You can add a class that capture the event on angular and make a specific animation. something similar to this.

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

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

You can check the events and how to handle them here ngAnimate