ui-router 更改路由时如何使用 nganimate 显示淡入淡出动画？

Question

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

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

根据上面的代码，每次路由器从任何页面（page1.html）改变路由到另一个页面（page2.html）时，都会有淡入淡出的动画。但是，如果我想为不同的视图设置不同的离开动画，我该如何实现呢？

Answer 1

animation 是动画 ng-view 的方式：

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

是的，由于浏览器前缀，这有点冗长。

您可能需要制作 ng-view position: absolute 以防止在设置动画时移动。

Answer 2

您可以通过将动画添加到视图子元素而不是视图元素本身来向不同视图添加不同的过渡效果。

我刚刚发布了一个 tutorial with a working demo 展示了使用带有 ui 路由器的 ngAnimate 的几个不同的过渡，包括一个向视图子元素添加动画的幻灯片 in/out 过渡。

这是我的 LESS 文件中的动画视图子元素的片段：

/* 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;
            }
        }
    }
}

ui-router 更改路由时如何使用 nganimate 显示淡入淡出动画？

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

angularjs

ng-animate