Angular Animation
  • Introduction
  • Getting Started
    • Add Angular Animate
  • Animating Core Directives
    • CSS Transition
    • ng-class Add/Remove
    • ng-include Animation
    • ng-repeat Animation
    • ng-show/ng-hide Animation
    • Form Animation
    • ngMessages Animation
  • Animating Custom Directives
Powered by GitBook
On this page

Was this helpful?

  1. Animating Core Directives

ngMessages Animation

support .ng-enter, .ng-leave animation

<div ng-messages="myForm.email.$error">
    <div ng-message="email">Enter a valid email</div>
    <div ng-message="required">Email field required</div>
</div>
[ng-message].ng-enter,[ng-message].ng-leave{
    transition: opacity 1s;
}

[ng-message].ng-enter, [ng-message].ng-leave-active{
    opacity: 0;
}

[ng-message].ng-enter-active, [ng-message].ng-leave{
    opacity: 1;
}
PreviousForm AnimationNextAnimating Custom Directives

Last updated 5 years ago

Was this helpful?