这是模仿饿了么写出来的效果
代码部分
HTML
<template>
<!--购物车小球-->
<div>
<button @click="additem" class="shop">按钮</button>
<div class="cart">{{ rednum }}</div>
<div class="ball-container">
<!--小球-->
<div v-for="(ball, index) in balls" :key="index">
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="ball.show">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
</div>
</template>
js部分
<script>
export default {
data() {
return {
// 点击数量
rednum: 0,
balls: [
//小球 设为3个 使用balls存放小球,这些小球的默认状态都是不显示的
{ show: false },
],
dropBalls: [], // 用dropBalls来存放掉落的小球
};
},
methods: {
additem(event) {
this.drop(event.target);
this.rednum++;
},
drop(el) {
//抛物
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
//当小球显示状态为隐藏时
ball.show = true; //将这个小球的显示状态设置为true
ball.el = el; // 将cartControl传过来的对象挂载到ball的el属性上
this.dropBalls.push(ball); // 将这个小球放入到dropBalls数组中
return;
}
}
},
beforeDrop(el) {
/* 购物车小球动画实现 */
let rednum = this.balls.length;
while (rednum--) {
let ball = this.balls[rednum];
if (ball.show) {
let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
let x = rect.left - 32; //x初始值 // 小球x方向位移= 小球距离屏幕左侧的距离-外层盒子距离水平的距离
let y = -(window.innerHeight - rect.top - 22); //获取y
el.style.display = "";
el.style.webkitTransform = "translateY(" + y + "px)"; //translateY // 设置外层盒子,即小球垂直方向的位移
el.style.transform = "translateY(" + y + "px)";
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = "translateX(" + x + "px)"; // 设置内层盒子,即小球水平方向的距离
inner.style.transform = "translateX(" + x + "px)";
}
}
},
dropping(el, done) {
/*重置小球数量 样式重置*/
el.offsetHeight;
el.style.webkitTransform = "translate3d(0,0,0)"; // 设置小球掉落后最终的位置
el.style.transform = "translate3d(0,0,0)";
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = "translate3d(0,0,0)";
inner.style.transform = "translate3d(0,0,0)";
el.addEventListener("transitionend", done); // Vue为了知道过渡的完成,必须设置相应的事件监听器。它可以是transitionend或 animationend
},
afterDrop(el) {
/*初始化小球*/
let ball = this.dropBalls.shift(); // 完成一次动画就删除一个dropBalls的小球
if (ball) {
ball.show = false;
el.style.display = "none"; //完成一次之后就让小球隐藏
}
},
},
};
</script>
css部分
<style lang="less" scoped>
.shop {
position: fixed;
top: 300px;
left: 400px;
// margin-top: 300px;
// margin-left: 400px;
}
.ball {
position: fixed;
// 小球落下来的位置
left: 32px;
bottom: 22px;
// margin-top: 32px;
// margin-left: 22px;
z-index: 200;
transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
}
.inner {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgb(0, 160, 220);
transition: all 1s linear;
}
.cart {
position: fixed;
bottom: 22px;
left: 32px;
width: 30px;
height: 30px;
background-color: rgb(0, 160, 220);
color: rgb(255, 255, 255);
}
</style>