技术原理

用ngAnimate制作AngularJS应用程序的动画

AngularJS是一个超级的JavaScript框架,它使得创建单页应用程序(SPA)变得非常容易。除此之外,AngularJS还提供了一些角度模块,可以用来创建一个很棒的用户体验。在本文中,我们将看到如何使用流行的ngAnimate向角度视图添加页面转换/动画

ngAnimate可用于各种指令,如ngRepeat、ngView、ngInclude、ngIf,ngMessage等。

在这篇文章中,我们将使用动画与ngView

在这里我们使用的是来自Adobe的方括号IDE,但您可以自由使用其他动画,例如Sublime Text、来自JetBrains的WebStorm等。

注意:我们还将使用Bootswatch Bootstrap API,使我们的HTML页面具有漂亮的外观

项目结构:

下面是IDE

ngAnimate-angularjs-project-structure

方括号中的项目结构这里是项目

中使用的每个文件的简短描述动画.css–定义页面动画

的主CSS文件bootstrap.min.css文件–鞋样鞋带,让我们的标签更漂亮看

配置js–主要的JavaScript文件,我们在其中定义我们的角度模块以及路由和控制器

外壳页.html–这是一个shell页面,其他视图将在其中动态加载

view1.html,view2.html,view3.html–这些是将加载到外壳页

中的部分视图如何应用动画:

ngAnimate将CSS类应用于不同的角度指令,具体取决于它们是进入视图

还是离开视图。ng enter–每当得到加载在

页中。ng leave–这个CSS类在离开

页时应用于该指令让我们逐个检查每个文件

外壳页.html

shellPage加载所需资源,将ng app应用于body并添加ng view以动态注入视图。

使用ngAnimate设置动画

配置js

在配置文件中,我们定义了角度模块以及路由和控制器。

模块转换app有两个依赖项:ngAnimate和ngRoute

var transitionApp=角度模块('transitionApp',['ngAnimate','ngRoute']);传输app.config(函数($routeProvider){$routeProvider提供程序templateUrl:'partials/view1.html',})。当('/view2'{controller:'view2Controller'})templateUrl:'partials/view3.html',});});传输app.controller('view1Controller',函数($scope){});传输app.controller('view2Controller',函数($scope){$范围.css ;传输app.controller('view3Controller',函数($scope){});

我们定义了三个部分视图(view1、view2、view3),它们将根据URL注入外壳页面。各个控制器设置一个CSS class属性,它是CSS类的名称,将应用于ng视图。我们将在这些CSS类中定义我们的动画,它们将用不同的动画加载每个页面。

部分页面view1.html,view2.html,view3.html

部分页面中没有太多内容,只是一些文本和链接到其他视图

view1.html

这是视图1视图2视图1视图3

view3.html

这是视图3请记住,这三个HTML文件是部分页面,将被注入外壳页.html根据我们在中定义的URL配置js文件

定义样式和动画:

让我们通过将CSS应用于它是

。视图{衬垫-顶部:200px;位置:绝对;顶部:0;}。查看{边距-顶部:50像素;}#标题{颜色:#333;位置:绝对;文本-对齐:居中;顶部:50像素;宽度:100%;}/*部分视图页(view1、view2、view3)的背景色和文本颜色.view1{背景:#bef2de;颜色:#00907c;}.view3{背景:#FFCBA4;颜色:rgba(149,95,40,0.91);}

为了在不同视图之间进行干净的转换,我们将设置CSS z-index属性

。视图.ng-离开{z-指标:9999;}@关键帧滑出{到{transform:translateX(-100%);}@-moz关键帧滑出{}@-webkit关键帧幻灯片{到{-webkit转换:translateX(-100%);}@关键帧缩放{}来自{opacity:0.3;-moz transform:scale(0.8);}}来自{opacity:0.3;-webkit transform:scale(0.8);}}

从右侧滑入动画

/*从右侧滑入*/从{变换:translateX(100%);}到{transform:translateX(0);}@-moz关键帧幻灯片{来自{-moz-变换:translateX(100%);}到{-moz转换:translateX(0);}@-webkit关键帧幻灯片{来自{-webkit-变换:translateX(100%);}到{-webkit转换:translateX(0);}@关键帧幻灯片{到{transform:translateY(0);}}来自{-moz-变换:translateY(100%);}到{-moz转换:translateY(0);}@-webkit关键帧幻灯片{来自{-webkit-变换:translateY(100%);}}

旋转和下降动画“

“/*旋转和下降*/0%{-webkit转换:rotateZ(0deg);}40%{-webkit转换:rotateZ(17度);}60%{-webkit转换:rotateZ(16度);}}0%{-moz变换:rotateZ(0deg);}40%{-moz变换:rotateZ(17度);}100%{-moz变换:translateY(100%)rotateZ(17度);}}0%{转换:rotateZ(0deg);}20%{变换:rotateZ(10度);动画计时函数:ease out;}60%{转换:rotateZ(16度);}}

转出报纸动画“

“/*转出报纸*/到{-webkit转换:translateZ(-3000px)rotateZ(360度);不透明度:0;}@-moz关键帧旋转新闻纸{到{-moz变换:translateZ(-3000px)rotateZ(360度);不透明度:0;}@关键帧旋转新闻纸{}

应用动画:

是时候应用我们在

查看1动画

/*查看1动画页面离开和进入*/.view1.ng-离开{-网络工具包-动画:slideOutLeft 0.5s两人都很放松;动画:slideOutLeft 0.5s两人都很放松;}.view1.ng-输入{-网络工具包-动画:缩放0.5s两人都很放松;动画:缩放0.5s两人都很放松;}

查看2个动画

/*查看2个页面离开和进入的动画*/-webkit转换源:0%0%;-moz变换原点:0%0%;变换原点:0%0%;动画:rotateFall 1s都可以轻松进入;}-网络工具包-动画:幻灯片亮度0.5s两人都很放松;动画:幻灯片亮度0.5s两人都很放松;-webkit转换来源:50P%;转化起点:50P%;动画:旋转新闻纸。5秒都轻松;}-网络工具包-动画:slideInUp 0.5s两人都很放松;-莫兹-动画:slideInUp 0.5s两人都很放松;}

我们已经完成了所有的更改。现在是时候运行应用程序

运行应用程序

运行应用程序时,您将看到下面的页面:

angular-view1

单击链接,您将看到动画播放,在进入和离开部分页面时。

还有其他各种动画可以用的。此外,一系列可能的影响也可能出现在这里:http://tympanus.net/Development/PageTransitions/

下载代码并亲自尝试

[按钮标题表单“下载代码”重定向url=https://edureka.wistia.com/medias/erx9uep9sa/下载?media_file_id=80450196 course_id=283 button_text=“Download Code”]

希望您喜欢ngAnimate blog的上述动画。如果你想深入角度JS,我建议你为什么不看看我们的角度认证培训课程页面。Edureka的角度JS认证培训将使你成为角度JS方面的专家,通过现场指导课程和使用真实用例的实践培训。

有问题要问我们吗?请在评论部分提到它,我们会给你回信。

相关文章:

从角度

开始使用JSP Servlet

创建在线测试应用程序使用SAX解析器解析XML文件

使用JAX-WS

编写RESTful Web服务

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能发展的重要燃料是 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录