How to show a fade animate using nganimate when ui-router changes route?

Question

.ng-leave {
    transition: 1s linear all;
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

Accrording to above code, every time router changes route from any page(page1.html) to another page(page2.html), there will be fade animation. But, if I want to have a different leave animation for different views, how can I accomplish that?

Answer 1

You could add different transitions to different views by adding the animations to the view child elements rather than the view element itself.

I've just posted a tutorial with a working demo showing a couple of different transitions using ngAnimate with ui router, including a slide in/out transition that adds animations to the view child elements.

Here's the snippet from my LESS file that animates the view child elements:

/* side form */
.view-side-form {
    .side-form {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .content {
            position: absolute;
            z-index: 100;
            top: 0;
            right: 0;
            width: 80%;
            height: 100%;
            overflow: auto;
            background: #fff;
            padding: 20px;
            border-left: 1px solid #e0e0e0;
        }

        .background {
            background: #000;
            opacity: .8;
            width: 100%;
            height: 100%;
        }
    }


    /* TRANSITION ANIMATIONS FOR SIDE FORM VIEW
    ------------------------------------------*/

    /* animations for side form view */
    &.ng-enter, 
    &.ng-leave {
        /* transition on enter and leave for .5s */
        transition: .5s;
    }

    /* start 'enter' transition */
    &.ng-enter {
        .side-form {
            .content {
                /* start with content 80% off the right of the page */
                right: -80%;
            }

            .background {
                /* start with background opacity 0 (invisible) */
                opacity: 0;
            }
        }
    }

    /* end 'enter' transition */
    &.ng-enter-active {
        .side-form {
            .content {
                /* transition the right position which 
                   slides the content into view */
                transition: right .5s;

                /* end with content aligned to the right of the page */
                right: 0;
            }

            .background {
                /* transition the background opacity to fades it in */
                transition: opacity .5s;

                /* end with background opacity 0.8 to give the overlay effect */
                opacity: .8;
            }
        }
    }

    /* end 'leave' transition */
    &.ng-leave-active {
        .side-form {
            .content {
                /* transition the right position which 
                   slides the content out of view */
                transition: right .5s;

                /* end transition with the content completely off the page */
                right: -100%;
            }

            .background {
                /* transition the background opacity to fades it out */
                transition: opacity .5s;

                /* end with background opacity 0 to hide it */
                opacity: 0;
            }
        }
    }
}

Answer 2

animation is the way to go for animating ng-view's:

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; } 
}

@-moz-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; } 
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; } 
}

@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; } 
}

@-moz-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; } 
}

@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; } 
}

[ng-view].ng-enter {
  -webkit-animation: fadein 1s ease;
  -o-animation: fadein 1s ease;
  animation: fadein 1s ease; 
}

[ng-view].ng-leave {
  -webkit-animation: fadeout 1s linear;
  -o-animation: fadeout 1s linear;
  animation: fadeout 1s linear; 
}

Yes, that's a bit verbose thanks to browser prefixes.

You may have to make your ng-view position: absolute to prevent shifts while animating.