vue2动画插件库集合_vue动画插件

点击涟漪效果 v-wave

效果图:

# 下载命令
npm i v-wave
# 详细说明网址
https://www.npmjs.com/package/v-wave
# 可以全局配置  也可以单独配置
#使用 引入之后标签内添加 v-wave="{配置项}" 例如:
		<div class="aaaa" v-wave="{
			color: 'rebeccapurple',//紫色
			initialOpacity: 0.5,
			duration: 2,
			easing: 'ease-in',
		}">
			Click me!
		</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

简单的动画转场 animate

# 地址   
https://www.npmjs.com/package/vue2-animate
# 简单的添加和删除    (位置调换没有效果)
# npm 下载
npm install --save vue2-animate
# 要引用一下 css 文件
require('vue2-animate/dist/vue2-animate.min.css')
# 案例---
			<transition-group name="bounceDown" tag="ul">
				<li v-for="item in items" :key="item.id">
					{{ item }}
				</li>
			</transition-group>
1
2
3
4
5
6
7
8
9
10
11
12
13