vue使用animate.css類庫實現動畫

首先安裝animate.css類庫

cnpm install animate.css –save

 

然后在vue的script文件中引用

 

import $ from '../assets/js/jquery.js';//非必要 

import animate from 'animate.css' 

 

使用方法如下

1. //使用duration來統一設置入場和離場時候動畫
2.   //還可以分別設置 :duration="{enter:200,leave:400}"
3.   <transition name="fade" enter-active-class="animated bounceIn"
4.    leave-active-class="animated bounceIn"
5.    :duration="200">
6.      <h3 v-if="flag">這是一個h3</h3>
7.   </transition>

 

1. fade: {
2.         title: '淡入淡出',
3.         fadeIn: '淡入',
4.         fadeInDown: '向下淡入',
5.         fadeInDownBig: '向下快速淡入',
6.         fadeInLeft: '向右淡入',
7.         fadeInLeftBig: '向右快速淡入',
8.         fadeInRight: '向左淡入',
9.         fadeInRightBig: '向左快速淡入',
10.         fadeInUp: '向上淡入',
11.         fadeInUpBig: '向上快速淡入',
12.         fadeOut: '淡出',
13.         fadeOutDown: '向下淡出',
14.         fadeOutDownBig: '向下快速淡出',
15.         fadeOutLeft: '向左淡出',
16.         fadeOutLeftBig: '向左快速淡出',
17.         adeOutRight: '向右淡出',
18.         fadeOutRightBig: '向右快速淡出',
19.         fadeOutUp: '向上淡出',
20.         fadeOutUpBig: '向上快速淡出'
21.       },
22.       bounce: {
23.         title: '彈跳類',
24.         bounceIn: '彈跳進入',
25.         bounceInDown: '向下彈跳進入',
26.         bounceInLeft: '向右彈跳進入',
27.         bounceInRight: '向左彈跳進入',
28.         bounceInUp: '向上彈跳進入',
29.         bounceOut: '彈跳退出',
30.         bounceOutDown: '向下彈跳退出',
31.         bounceOutLeft: '向左彈跳退出',
32.         bounceOutRight: '向右彈跳退出',
33.         bounceOutUp: '向上彈跳退出'
34.       },
35.       zoom: {
36.         title: '縮放類',
37.         zoomIn: '放大進入',
38.         zoomInDown: '向下放大進入',
39.         zoomInLeft: '向右放大進入',
40.         zoomInRight: '向左放大進入',
41.         zoomInUp: '向上放大進入',
42.         zoomOut: '縮小退出',
43.         zoomOutDown: '向下縮小退出',
44.         zoomOutLeft: '向左縮小退出',
45.         zoomOutRight: '向右縮小退出',
46.         zoomOutUp: '向上縮小退出'
47.       },
48.       rotate: {
49.         title: '旋轉類',
50.         rotateIn: '順時針旋轉進入',
51.         rotateInDownLeft: '從左往下旋入',
52.         rotateInDownRight: '從右往下旋入',
53.         rotateInUpLeft: '從左往上旋入',
54.         rotateInUpRight: '從右往上旋入',
55.         rotateOut: '順時針旋轉退出',
56.         rotateOutDownLeft: '向左下旋出',
57.         rotateOutDownRight: '向右下旋出',
58.         rotateOutUpLeft: '向左上旋出',
59.         rotateOutUpRight: '向右上旋出'
60.       },
61.       flip: {
62.         title: '翻轉類',
63.         flipInX: '水平翻轉進入',
64.         flipInY: '垂直翻轉進入',
65.         flipOutX: '水平翻轉退出',
66.         flipOutY: '垂直翻轉退出'
67.       },
68.       strong: {
69.         title: '強調類',
70.         bounce: '彈跳',
71.         flash: '閃爍',
72.         pulse: '脈沖',
73.         rubberBand: '橡皮筋',
74.         shake: '左右弱晃動',
75.         swing: '上下擺動',
76.         tada: '縮放擺動',
77.         wobble: '左右強晃動',
78.         jello: '拉伸抖動'
79.       }