Rumah > hujung hadapan web > tutorial js > Angular animations动画练习

Angular animations动画练习

小云云
Lepaskan: 2017-12-18 15:53:09
asal
2011 orang telah melayarinya
Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 
Angular2的动画主要是和@Component结合在了一起。 
animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制

回调函数

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

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("动画结束");

    }

  }

Salin selepas log masuk

Angular animations动画练习

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)'})

      ]) )),

    ])

  ]);

Salin selepas log masuk

Angular animations动画练习

相关推荐;

CSS3中transform、transition和animationsan三种属性的区别实例详解

css的animation动画的使用教程

animation实现让云朵飘的动画实例


Atas ialah kandungan terperinci Angular animations动画练习. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan