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.       }