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

Form Animation

  • .ng-valid

  • .ng-invalid

  • .ng-dirty

  • .ng-pristine

All above can be animated by suffixing -add or -remove

.ng-invalid-add, 
.ng-invalid-remove{
    transition: border-color 1s;
}

/* final state */
.ng-invalid{
    border-color: red;
}

Note: check form error from console

angular.element($0).scope().myForm.email.$error

Previousng-show/ng-hide AnimationNextngMessages Animation

Last updated 5 years ago

Was this helpful?