这篇文章主要介绍了如何利用CSS3在Angular中实现动画效果，对angular动画相关知识感兴趣的朋友一起学习吧
废话不多说了，直接给大家贴实例代码。
直接看例子：
<title>ngAnimate插件1</title> .box{width:200px;height:200px;background-color:red;transition:1s all;} /*显示操作*/ .box.ng-enter{opacity:0;} .box.ng-enter-active{opacity:1;} /*隐藏操作*/ .box.ng-leave{opacity:1;} .box.ng<b style="color:transparent">来源gao@dai!ma.com搞$代^码网</b>-leave-active{opacity:0;} <div> <div class="box"></div></div>
引入angular-animate插件，我们绑定了ng-if指令，在删除和添加DOM节点的时候，angular会添加指定的class，方便我们完成动画。
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active
现在再看看显示和隐藏。
<title>ngAnimate插件4</title> .box{width:200px;height:200px;background-color:red;transition:1s all;} /*显示操作*/ .box.ng-hide-remove{opacity:0;} .box.ng-hide-remove-active{opacity:1;} /*隐藏操作*/ .box.ng-hide-add{opacity:1;} .box.ng-hide-add-active{opacity:0;} <div> <div class="box"></div></div>
.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active
这个例子我们使用的是ng-show，属于显示和隐藏。上一个例子是ng-if，属于添加和删除。
回顾上一节我们提到的路由，我们可以结合起来操作。
<title>ngAnimate插件2</title> .box{transition:1s all;position:absolute;} /*显示操作*/ .box.ng-enter{opacity:0;} .box.ng-enter-active{opacity:1;} /*隐藏操作*/ .box.ng-leave{opacity:1;} .box.ng-leave-active{opacity:0;} <div> 首页内容标题<div class="box"></div></div>
这样在切换页面的时候就有淡入淡出的效果。
再回顾前面的几章讲的百度搜索：
<title>ngAnimate插件3</title> .box{transition:1s all;} /*显示操作*/ .box.ng-enter{opacity:0;} .box.ng-enter-active{opacity:1;} /*隐藏操作*/ .box.ng-leave{display:none;} .box.ng-enter-stagger{animation-delay:0.1s;} <div> <ul> <li class="box">{{d}}</li></ul></div>
通过跨域我们得到百度返回过来的数据，依次过渡显示到页面上。
下面来看JS动画的例子：
<title>ngAnimate插件5</title> .box{width:200px;height:200px;background-color:red;} <div> <div class="box"></div></div>
JS动画我们使用JQ的动画库来完成，注意我们在视图上使用的是ng-if，表示添加和删除DOM节点，所以我们在控制器return leave&enter。
JS动画有了ng-if，自然就是ng-show。
<title>ngAnimate插件5</title> .box{width:200px;height:200px;background-color:red;} <div> <div class="box"></div></div>
在控制器return addClass&removeClass，表示隐藏和显示。
以上就是利用CSS3在Angular中实现动画的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：利用CSS3在Angular中实现动画
转载请注明原文链接：利用CSS3在Angular中实现动画
