Vue--过渡动画实现的三种方式

https://www.cnblogs.com/mrszhou/p/7859020.html

Vue--过渡动画实现的三种方式

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

1

2

3

4

5

6

7

8

28

29

30

31

32

33

51

52 显示/隐藏


53

54

55 it 传说

56

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

 

四.完成品牌管理案例的vue中的动画完成删除提示

 

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 52

11. 53

12. 54

13. 55

14. 56

15. 57

16. 58 编号: 品牌名称:

17. 59 添加

18. 60

61

品牌名称：

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

编号	品牌名称	创立时间	操作
没有品牌数据
{{item.id}}	{{item.name}}	{{item.ctime | dateFrm("/")}}	删除

82