使用ng-outlet动画页面过渡

Question

是否可以使用ng-outlet为角度1.5设置页面输入和页面离开过渡，就像使用ng-view一样？如果是这样的话？

Answer 1

好的，因为应该提供答案：

1）您需要使用bower

为您的AngularJS版本提供角度动画

2）将ngAnimate添加为应用程序模块的依赖项

3）然后编写一些CSS3动画或转换来使用

ng-outlet.ng-enter {
    opacity: 0;
    transition-duration: 1000ms;
}

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

ng-outlet.ng-leave {
    opacity: 1;
    transition-duration: 1000ms;
}

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

Angular将检测这些动画和/或过渡，并在其事件循环中提供访问以进行动画或过渡。您可以通过查看Chrome DevTools中的标记来观察此情况。如果上面的CSS存在，您将看到ng-enter，ng-enter-active等应用于ngOutlet。如果删除它们，事件类将不再应用于ngOutlet。