vue中实现动画的几种方式

一.使用vue的transition标签结合css样式完成动画

 

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 28

10. 29

11. 30

12. 31

13. 32

14. 33

15. 51

16. 52 显示/隐藏


17. 53

18. 54

19. 55 it 传说

20. 56

21. 57

58

59

60

61

78

 

二.利用animate.css结合transition实现动画

animate.css   演示地址 : https://daneden.github.io/animate.css/

 View Code

实例代码:

 

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15 显示/隐藏


16. 16

17. 17 enter-active-class="animated fadeInRight"

18. 18 leave-active-class="animated fadeOutRight"

19. 19 >

20. 20

21. 23

22. 24

    it创业

23. 25

24. 26

27

28

29

46

 

三.利用 vue中的钩子函数实现动画

 

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 14

11. 15

12. 16

13. 17

14. 18

15. 19

16. 20 显示/隐藏


17. 21

18. 22

    itcast 传智

19. 23

20. 24

25

26

27

28

72

73