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

ng-include Animation

.ng-enter{
    opacity: 0;
    transition: opacity 1s;
}

.ng-enter-active{
    opacity: 1;
}

/* sample  */
ng-include.ng-enter,[ng-include].ng-enter{
    opacity: 0;
    transition: opacity 1s;
}

ng-include.ng-enter-active, [ng-include].ng-enter-active{
    opacity: 1;
}

ngIf - Remove Alert

/* sample */
.alert-container.ng-leave{
    opacity: 1;
    transition: opacity 1s;
}

.alert-container.ng-leave-active{
    opacity: 0;
}
Previousng-class Add/RemoveNextng-repeat Animation

Last updated 5 years ago

Was this helpful?