首页 > web前端 > js教程 > 正文

Angular如何制作animations动画三?这里有angularjs制作animations动画的详情

寻∝梦
发布: 2018-09-07 17:54:17
原创
1808人浏览过

本篇文章为练习的文章,巩固自己的学的成果,现在我们试试做做angularjs中的animations动画三,看看效果。下面就让我们一起来看下去吧

这是前言

文章基于angular的练手项目。文章目录上一篇文章《Angular练习之animations动画二》中练习了入场和出场动画、 Keyframes实现串联动画、Group实现并行动画。今天练习动画回调函数、query选择器。

开始练习

回调函数

(想看更多就到PHP中文网AngularJS开发手册中学习)

回调用法也是很简单,如下:

1

2

3

4

5

6

7

8

9

10

11

12

<p *ngIf="Group" style="height: 100px;width: 100px;background-color: black; border-radius: 50px;"

     [@GroupAnimate]="boxState" (@GroupAnimate.done)="Callback(false)" (@GroupAnimate.start)="Callback(true)">

</p>

 

 

Callback(f:boolean){

  if(f){

    console.log("动画开始");

  }else {

    console.log("动画结束");

  }

}

登录后复制

1.gif

query

用法和css选择器大致相同,通过query便可以实现不同元素实现不同的动画效果。

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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

/*

query选择器演示

用法和css选择器大致相同

 */

export const QueryAnimate = trigger('QueryAnimate',[

    transition('off=>on', [

      // 先全部隐藏

      query('p', style({ opacity: 0 })),

      // 再执行动画

      query('.box-top', animate('500ms',keyframes([

        style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),

        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})

      ]) )),

      query('.box-center', animate('500ms',keyframes([

        style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),

        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})

      ]) )),

      query('.box-foot', animate('500ms',keyframes([

        style({opacity: 0, transform: 'translateY(400%)', offset: 0}),

        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})

      ]) )),

      query('h2', animate('500ms',keyframes([

        style({transform:'scale(0.5)'}),

        style({transform: 'scale(1)'})

      ]) )),

    ]),

    transition('on=>off', [

      query('.box-top', animate('500ms',keyframes([

        style({opacity: 1, transform: 'translateY(0)'}),

        style({opacity: 0, transform: 'translateY(-400%)'})

      ]) )),

      query('.box-center', animate('500ms',keyframes([

        style({opacity: 1, transform: 'translateX(0)'}),

        style({opacity: 0, transform: 'translateX(-400%)'})

      ]) )),

      query('.box-foot', animate('500ms',keyframes([

        style({opacity: 1, transform: 'translateY(0)'}),

        style({opacity: 0, transform: 'translateY(400%)'})

      ]) )),

      query('h2', animate('500ms',keyframes([

        style({transform:'scale(1)'}),

        style({transform: 'scale(0.5)'})

      ]) )),

    ])

  ]);

登录后复制

2.gif

源码

源码放在github开源社区上面,随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。github地址:https://github.com/yiershan/A...

好了,本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

以上就是Angular如何制作animations动画三?这里有angularjs制作animations动画的详情的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号