HTML代码
HTML代码可以放到页面的最后边,因为用的是固定定位所以不会影响代码的正常运行
<!-- 小球 -->
<div v-for="ball in balls" :key="ball.index">
<transition
name="drop"
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop"
>
<div
ref="gao-bal"
v-show="ball.show"
:class="[iTop < cTop ? 'ball' : 'gao-ball', 'ball']"
>
<div class="inner inner-hook" ref="innerImg"></div>
</div>
</transition>
</div>
js代码部分
<script>
export default {
data() {
return {
//小球代码
balls: [
//小球 设为3个
{
show: false,
},
],
dropBalls: [],
};
},
methods: {
additem(event) {
this.drop(event.target);
this.TakeOutQuantity++;
},
drop(el) {
//抛物
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) {
/* 购物车小球动画实现 */
let TakeOutQuantity = this.balls.length;
while (TakeOutQuantity--) {
let ball = this.balls[TakeOutQuantity];
if (ball.show) {
let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
//这里可以调节小球起抛点的上下位置
let x = rect.left - 32; //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); //动画监听
},
afterDrop(el) {
/*初始化小球*/
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = "none";
}
},
addClick(event) {
/*在自己定义的点击事件中调用小球事件*/
this.drop(event.target);
},
},
};
</script>
css代码
<style lang="less" scoped>
.shop {
z-index: 999;
position: fixed;
top: 300px;
left: 400px;
}
.ball {
z-index: 999;
position: fixed;
left: 122px;
bottom: 220px;
z-index: 200;
/* 贝塞尔曲线的调整方法我放在了页面最下边,可以参考任意一个链接进行调整 */
transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
}
.inner {
width: 40px;
height: 40px;
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>
因为这个贝塞尔曲线用的过程中我们还需要进行调整,为了方便,我找到了两个专门调节贝塞尔曲线的线上工具
http://web.chacuo.net/css3beziertool