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