本文摘自PHP中文网,作者零下一度,侵删。
ngAnimate插件是做什么的?
ngAnimate插件如其名字一样是为元素提供动画的。
怎么定义动画?
第一步必须是引入插件
1 |
|
第二步让app引入(依赖)这个插件
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
1 |
|
1 |
|
为什么添加样式就可以产生动画?
当元素进入页面时,angular会给元素依次添加上class ng-enter 和 ng-enter-active,相信大家都知道,CSS3.0在一个元素定义了 transition 之后,两个相同属性的属性值改变就会用过渡动画来实现属性值的改变。当元素移除页面时也是同理,所以我们只要定义元素的四个class来定义这四个时间点的状态,其他的就交给angular来做就好了。支持这种方式定义动画的指令有哪些?
ng-if、ng-view、ng-repeat、ng-include、ng-switch
这几个指令是通过新建节点和移除节点来实现元素的显示和隐藏的ng-repeat 的不同之处
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.
new
-item{
padding: 10px;
border-bottom: 1px solid #ededed;
font-size: 1.5rem;
position: relative;
transition:all 0.5s;
}
.
new
-item.ng-enter{
top: 10px;
}
.
new
-item.ng-enter-active{
top: 0px;
}
.
new
-item.ng-enter-stagger{
/*ng-repeat提供了这个样式,来实现每一个item条目的依次执行某个动画 */
animation-delay:100ms;
-webkit-animation-delay:100ms;
}
.
new
-item.ng-leave{
opacity:1;
}
.
new
-item.ng-leave-active{
opacity:1;
}
.
new
-item.ng-leave-stagger{
animation-delay:100ms;
-webkit-animation-delay:100ms;
}
//html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>
刚才说通过新建和删除元素来实现的指令是可以进行动画的,那么只是更改样式显示或者隐藏元素的指令(ng-show ng-hide ng-class )能不能进行动画呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
添加动画的第二种方式:通过js的方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
以上就是ngAnimate插件是做什么的?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
animation-iteration-count属性怎么用
更多相关阅读请进入《angular-》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者