现在，我们的程序就会有像上面那样的动画效果了。当离开的时候，页面会向左滑出，当进入的时候会放大。我们还添加了z-index属性，以便离开的页面会处于进入的页面的上层。
让我们看一下如何为具体的页面创建动画。
具体页面的动画效果
我们为不同的页面创建了各自的Angular 控制器。在这些控制器里面，我们添加了一个pageClass并且将它添加到我们的<div ng-view>中。我们将会使用这些类名来引出具体的页面。
不像上面的.ng-enter 和 .ng-leave那样，我们使它们更加具体化。
... .ng-enter { z-index: 8888; } .ng-leave { z-index: 9999; } /* page specific animations ------------------------ */ /* home -------------------------- */ .page-home.ng-enter { animation: scaleUp 0.5s both ease-in; } .page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; } /* about ------------------------ */ .page-about.ng-enter { animation:slideInRight 0.5s both ease-in; } .page-about.ng-leave { animation:slideOutLeft 0.5s both ease-in; } /* contact ---------------------- */ .page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; } .page-contact.ng-enter { animation:slideInUp 0.5s both ease-in; } ...
现在，每一个页面都有它各自唯一的进入和离开的动画效果。
总结
为我们的Angular程序添加动画效果是相当容易的。你所需要做的就是加载ngAnimate并创建你的CSS动画效果。真诚的希望这篇文章可以帮助你了解一些使用ng-view时的一些比较酷的动画效果。
View Code : ?p=info
您可能感兴趣的文章: