前言
大家好,我是尤雨海。。。。。。。。。
一、代码
<template>
<div class="ball">
<!-- 模拟商品区域 -->
<ul>
<li v-for="(item, index) in 5" :key="index">
<span ref="add">+</span>
</li>
</ul>
<!-- 模拟购物车区域 -->
<div class="shopCar" ref="shopCar">{{ number }}</div>
</div>
</template>
<script>
export default {
name: "ball",
data() {
return {
number: 0,
};
},
mounted() {
var buttons = this.$refs.add;
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", this.addCar);
}
},
methods: {
/* 点击添加小球事件 */
addCar(event) {
this.number++;
let x = event.pageX - event.target.offsetWidth / 2;
let y = event.pageY - event.target.offsetWidth / 2;
this.createBall(x, y);
},
/* 创建小球,添加动画 */
createBall(left, top) {
let bar = document.createElement("div");
bar.style.position = "absolute";
bar.style.left = left + "px";
bar.style.top = top + "px";
bar.style.width = "20px";
bar.style.height = "20px";
bar.style.borderRadius = "50%";
bar.style.backgroundColor = "#02b6fd";
bar.style.transition =
"left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)";
document.body.appendChild(bar);
// 添加动画属性
setTimeout(() => {
let target = this.$refs.shopCar;
bar.style.left = target.offsetLeft + target.offsetWidth / 2 + "px";
bar.style.top = target.offsetTop + "px";
}, 0);
/**
* 动画结束后,删除自己
*/
bar.ontransitionend = function () {
this.remove();
};
},
},
};
</script>
<style lang="scss" scoped>
.ball {
width: 100%;
height: 100vh;
ul {
width: 100%;
li {
width: 100%;
display: flex;
justify-content: end;
padding: 10px;
span {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: aqua;
color: aliceblue;
font-size: 20px;
text-align: center;
line-height: 30px;
}
}
}
}
.shopCar {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: fixed;
left: 20px;
bottom: 30px;
text-align: center;
line-height: 50px;
color: white;
}
</style>