使用ngView配合AngularJS应用实现动画效果的方法

编辑：rootadmin

推荐整理分享使用ngView配合AngularJS应用实现动画效果的方法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

AngularJS 提供了一个很棒的方式来创建单页app。正是由于这个原因，使得我们的站点看起来更像是一个原生的手机程序。为了使它看起来更像是原生的程序，我们可以使用 ngAnimate module 为它添加过渡和动画效果。

这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。我们要构建什么

我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。

我们将会使用：

使用 ngRoute 来为我们的页面路由使用 ngAnimate 来为页面创建动画效果对页面使用 CSS Animations 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果

Extreme Animations: 我们在这里使用的动画效果就是上面提到的这些。精巧的动画效果可以为你的站点增色不少，仅仅是demo页面就足够令我们为之疯狂了。*动画效果来自于Codrops上的 A Collection of Page Transitions

它如何工作？

让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。

我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。

ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass

一定要查看 ngAnimate 文档来了解ngAnimate更多的功能。接下来，让我们在实际应用中了解一下。

开始我们的程序

以下使我们需要的文件：

- index.html - style.css - app.js - page-home.html - page-about.html - page-contact.html

让我们从 index.html 开始，我们将会加载 AngularJS, ngRoute 以及 ngAnimate。对了，不要忘了使用Bootstrap 来定义样式。

本文链接地址:https://www.jiuchutong.com/biancheng/380439.html 转载请保留说明！