基于Vuejs2.0的购物车动画组件

一、前言

前年做一个类似于商城的项目，项目里面有加入购物车的功能，于是实现了一个简版的购物车动画。没想到今年上半年又遇到类似的需求，实在没法，也懒得去Copy代码，于是写了一个购物车抛物线动画组件。

二、示例

在线运行

三、具体实施

1）安装

npm install @hyhello/vue-ball

Note: add --save if you are using npm < 5.0.0

2）Vue mount

// global use
import Vue from 'vue';
import vueBall from '@hyhello/vue-ball';

// use  @params：支持 options 全局配置, 默认：{ zIndex: 2000 }
Vue.use(vueBall, [options]);

// or Local use
import { Ball } from '@hyhello/vue-ball';

// 配置zIndex， 默认为2000
Ball.configure(options);

export default {
    components: { Ball }
};

3）Use in SPA

<style>
	html,
	body,
	.app {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: blue;
	}
	.c-btn {
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.chat {
		position: fixed;
		bottom: 30px;
		right: 30px;
	}

	.chat-icon {
		font-size: 45px;
	}

	.is-heartBeat {
		animation-name: heartBeat;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
	}

	@keyframes heartBeat {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		14% {
			-webkit-transform: scale(1.3);
			transform: scale(1.3);
		}

		28% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		42% {
			-webkit-transform: scale(1.3);
			transform: scale(1.3);
		}

		70% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
</style>
<template>
	<div class="app">
		<el-button type="primary" class="c-btn" @click="action">
			<i class="el-icon-shopping-cart-full"></i>
			加入购物车
		</el-button>
		<vue-ball ref="ball" :duration="600" @after-enter="afterEnter">
			<el-card class="chat">
				<div class="chat-icon" :class="{'is-heartBeat': heartBeat}" @animationend="transitioned">
					<i class="el-icon-shopping-cart-full"></i>
				</div>
			</el-card>
			<i slot="icon" class="el-icon-shopping-cart-full"></i>
		</vue-ball>
	</div>
</template>
<script>
	import { Button: ElButton, Message } from 'element-ui';
	import { Ball as vueBall } from '@hyhello/vue-ball';

	// *******此处可设置 zIndex，默认zIndex： 2000
	// vueBall.configure({
	//     zIndex: 2000
	// });

	export default {
	    components: { vueBall, ElButton },
	    data () {
	        return {
	            heartBeat: false
	        };
	    },
	    methods: {
	        // 加入球之后
	        transitioned() {
	            this.heartBeat = false;
	        },
	        // 此处为使用入口
	        action(ev) {
	            // action 返回的是Promise， resolve结果跟afterEnter效果一致
	            this.$refs.ball.action(ev.target).then(() => {
	                this.heartBeat = true;
	                Message.success('成功加入购物车！');
	            });
	        },
	        // 求进入后
	        afterEnter() {
	            console.log('成功加入购物车!');
	        }
	    }
	}
</script>

四、API

1）Attributes

参数	说明	类型	可选值	默认值
ballNums	允许运动的球的总数	number	—	5
duration	球运动持续时长(毫秒)	number	—	1000
easing	控制球运动的动画函数	string	—	cubic-bezier(0.49, -0.35, 0.75, 0.41)

2）Events

事件名	说明	回调参数
after-enter	球运动完成后触发	-

3）Slots

名称	说明
icon	自定义球

五、参考

1、张鑫旭：这回试试使用CSS实现抛物线运动效果。

2、Vue transition实践。

最后，感谢你阅读完本文，希望你会有所收获，如果觉得不错可以给我个Star哟~。