Vue uses the animate.css class library to achieve animation

First install the animate.css class library

cnpm install animate.css –save

 

Then reference it in the script file of vue

 

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

import animate from 'animate.css'\

 

The method of use is as follows

1. //Use duration to uniformly set the animation when entering and leaving the market
2.   //You can also set separately: 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 ">This is an h3</h3>
7.   </transition>

 

1. fade: {
2.         title: 'Fade in and out',
3.         fadeIn: 'Fade in',
4.         fadeInDown: 'Fade down',
5.         fadeInDownBig: 'Fade down fast',
6.         fadeInLeft: 'Fade in to the right',
7.         fadeInLeftBig: 'Fade in fast to the right',
8.         fadeInRight: 'Fade in to the left',
9.         fadeInRightBig: 'Fade in fast to the left',
10.         fadeInUp: 'Fade up',
11.         fadeInUpBig: 'Fade up fast',
12.         fadeOut: 'Fade out',
13.         fadeOutDown: 'Fade down',
14.         fadeOutDownBig: 'Fade down quickly',
15.         fadeOutLeft: 'Fade to the left',
16.         fadeOutLeftBig: 'Fade out quickly to the left',
17.         adeOutRight: 'Fade out right',
18.         fadeOutRightBig: 'Fade out fast to the right',
19.         fadeOutUp: 'Fade up',
20.         fadeOutUpBig: 'Fade up fast'
21.       },
22.       bounce: {
23.         title: 'Bounce Class',
24.         bounceIn: 'Bounce into',
25.         bounceInDown: 'Bounce down to enter',
26.         bounceInLeft: 'Bounce to the right to enter',
27.         bounceInRight: 'Bounce left to enter',
28.         bounceInUp: 'Bounce up to enter',
29.         bounceOut: 'Bounce out',
30.         bounceOutDown: 'Bounce down to exit',
31.         bounceOutLeft: 'Bounce to the left to exit',
32.         bounceOutRight: 'Bounce to the right to exit',
33.         bounceOutUp: 'Bounce up to exit'
34.       },
35.       zoom: {
36.         title: 'Zoom class',
37.         zoomIn: 'Zoom in',
38.         zoomInDown: 'Zoom down to enter',
39.         zoomInLeft: 'Zoom in to the right',
40.         zoomInRight: 'Zoom in to the left',
41.         zoomInUp: 'Zoom up to enter',
42.         zoomOut: 'Zoom out',
43.         zoomOutDown: 'Zoom down to exit',
44.         zoomOutLeft: 'Zoom to the left to exit',
45.         zoomOutRight: 'Zoom to the right to exit',
46.         zoomOutUp: 'Zoom up to exit'
47.       },
48.       rotate: {
49.         title: 'Rotation class',
50.         rotateIn: 'Rotate clockwise into',
51.         rotateInDownLeft: 'Rotate from left to bottom',
52.         rotateInDownRight: 'Rotate from right to bottom',
53.         rotateInUpLeft: 'Rotate from left to top',
54.         rotateInUpRight: 'Rotate from right to up',
55.         rotateOut: 'Rotate clockwise to exit',
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.       }