vue原生小球抛物线仿优信二手车

HTML代码

HTML代码可以放到页面的最后边，因为用的是固定定位所以不会影响代码的正常运行

        <!-- 小球 --><div v-for="ball in balls" :key="ball.index"><transitionname="drop"@before-enter="beforeDrop"@enter="dropping"@after-enter="afterDrop"><divref="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); //获取yel.style.display = "";el.style.webkitTransform = "translateY(" + y + "px)"; //translateYel.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>

因为这个贝塞尔曲线用的过程中我们还需要进行调整，为了方便，我找到了两个专门调节贝塞尔曲线的线上工具

cubic-bezier.com

http://web.chacuo.net/css3beziertool

vue原生小球抛物线仿优信二手车相关推荐

仿优信二手车品牌选择demo
不知道为啥,markdown编辑器不能用,一打开就奔溃,换个浏览器也不行,重启也不好使,估计是csdn那块出问题了吧:索性这会想写就干脆用普通编辑器写了,排版不好了大伙多担待.项目实现方法如果有更好的 ...
php面试题优信二手车_怎么成为优信二手车评估师？面试问题有哪些？
二手车行业近些年的发展大家想必都有所了解,光说二手车电商这个行业就出现了优信.瓜子等巨头,就拿优信来说,目前已经在纳斯达克上市,成为了二手车电商第一股,因为顶着上市公司这四个字,所以有很多人都想进入优 ...
优信二手车数据可视化
之前使用scrapy抓取了优信二手车的数据,经过这几天的努力,终于把这些数据进行了清洗,并用echarts进行了可视化处理 1.观察数据可以看到由于抓取的时候没有进行处理,所以整个标题都拿了下来,并 ...
基于requests库和lxml库爬取优信二手车
工具:lxml库和requests库 # _*_ coding:utf-8 _*_ import requests import re import time import MySQLdb impor ...
优信二手车业务规模大幅增长业绩亮眼
优信二手车在2016年可谓收获颇丰,业务规模大幅增长,业绩一路上扬,较前年相比,猛增了3倍,交易规模达到了37亿,并创下了单月交易突破5万台的优秀业绩,优信二手车已经成为领先行业的优秀二手车电商品牌, ...
优信二手车以创新迎接机遇与挑战
只有创新,才能为企业提供源源不断的可持续发展优势.纵观优信二手车多年来的发展历程,始终把创新作为企业发展的驱动力,以创新迎接机遇与挑战,以创新打造优信二手车的卓越品质,满足消费者不断升级的品质需求. ...
优信二手车与时俱进坚持创新
优信二手车作为行业表率,在经营中始终保持旺盛的创新激情,善于吐故纳新,二手车这一新兴行业中,推出了无数令人瞩目的创新举措,牢牢掌握发展主动权,奠定优信在二手车市场的领军地位. 据了解,优信二手车个性 ...
借势新一轮融资优信二手车发展将大步向前
随着国内二手车市场的快速发展,目前已到了行业发展的一个拐点,想要实现跨越式飞跃,必须经历凤凰涅槃的重生过程.作为行业内的知名品牌,优信二手车深知二手车行业想要实现大发展必须借助资本市场力量. 近日,优 ...
优信二手车告急！CTO辞职，员工降薪至1700元...
日前,受疫情影响,优信二手车在给部分员工的致信中表示,需从3月1日起停工待岗.不过,在此期间,优信二手车将按照各地政策支付员工的最低生活保障,并负担员工的基本社保和住房公积金. 此前有消息称,在此次疫 ...

vue原生小球抛物线仿优信二手车

vue原生小球抛物线仿优信二手车相关推荐

最新文章

热门文章

vue原生小球抛物线 仿优信二手车

vue原生小球抛物线 仿优信二手车相关推荐

最新文章

热门文章

vue原生小球抛物线仿优信二手车

vue原生小球抛物线仿优信二手车相关推荐