vue实现购物车的小球抛物线效果详解
这次给大家带来vue实现购物车的小球抛物线效果详解,vue实现购物车小球抛物线的注意事项有哪些,下面就是实战案例,一起来看一下。
本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下:
备注:此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。
布局代码
<p class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"> <p v-show="ball.show" class="ball" v-bind:css="false"> <p class="inner inner-hook" ></p> </p> </transition> </p>
css代码(使用stylus写法)
.ball-container .ball position fixed left 32px bottom 22px z-index 200 transition all 0.4s 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 0.4s linear
js代码
data() { return { balls : [ { show: false }, { show: false }, { show: false }, { show: false }, { show: false } ], dropBalls: [] }; }, methods: { 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 count = this.balls.length; while (count--) { let ball = this.balls[count]; if(ball.show) { let rect = ball.el.getBoundingClientRect(); let x = rect.left - 32; let y = -(window.innerHeight - rect.top - 22); el.style.webkitTransform = `translate3d(0,${y}px,0)`; el.style.transform = `translate3d(0,${y}px,0)`; let inner = el.getElementsByClassName('inner-hook')[0]; inner.style.webkitTransform = `translate3d(${x}px,0,0)`; inner.style.transform = `translate3d(${x}px,0,0)`; } } }, dropping(el) { /* eslint-disable no-unused-vars */ let rf = el.offsetHeight; this.$nextTick(() => { 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)'; }); }, afterDrop(el){ let ball = this.dropBalls.shift(); if(ball) { ball.show = false; el.style.display = 'none'; } } }
getBoundingClientRect()。方法请阅读这篇文章http://www.jb51.net/article/134208.htm
说明:
goods 是一个组件,里面包含menu(p) , foods(p), shopcart(购物车组件)。其中foods 包含cartcontrol(即小球组件)
组件之间的通信:说明:菜单和商品
第1个问题:小球,需要获取所点击的商品的数量。
利用Vue的props,将foods值传递给cartcontrol。但是这样有个问题。即子组件更新,无法同步回父组件。且,在子组件中,对food注册了一个count属性,此属性也无法同步回父组件(goods)。
解决方法:
导入全局的Vue。
利用Vue.set(target,key,value); 对 target注册count;
第2个问题:小球点击,将所点击过的商品数目传递给 shopcart。
在goods的 computed:{} 定义一个方法,将该方法以props的方式,传递给shopcart。
因为,shopcart,对传递过去的数据仅数据运算(不会改变)。因此不用同步会父组件。
第3个问题:购物车小球做抛物线运动。
对于购物车小球做抛物线运动。首先,落点都在购物车,小球则是随机的。要做抛物线运动,就要获取,所点击的 + 号的x,y位置。其次,抛物线运动,只有在enter--> enter-to这段期间有,在leave--> leave-to 期间是没有的,因此,需要用Vue提供的钩子函数。
获取 + 号x,y 位置:
小球(cartcontrol)是子组件。需要把数据传递给 goods(父组件)。可以使用Vuex,或者直接使用事件总线。对于饿了吗demo。直接使用事件总线。
创建一个 空的Vue。在 cartcontrol 中 ,通过 Bus.$emit(key, ... arg); 注册一个监听,然后再父组件 通过Bus.$on(key, function(... arg));监听此方法。将所操作的 dom 对象传递过去即可
Vue提供的钩子
这里要说明一点,Vue在他的官网,对于只有过度的js,done是必须的,当我加上done的时候,after-enter方法无法被执行。
还有1个问题,Vue官网推荐,只有过度效果,在做过度动画的元素上加上v-bind:class='false'。之前没加,出现了,小球只能在第1次点击的地方做过度效果。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是vue实现购物车的小球抛物线效果详解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

你可能遇到过智能手机屏幕出现绿色线条的问题,即使没见过,也一定在网络上看到过相关图片。那么,智能手表屏幕变白的情况你遇见过吗?4月2日,CNMO从外媒了解到,一名Reddit用户在社交平台上分享了一张图片,展示了三星Watch系列智能手表屏幕变白的情况。该用户写道:"我离开时正在充电,回来时就这样了,我尝试重启,但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过,从图片上看,应该是三星Watch5。此前,另一位Reddit用户也报告

Java中如何实现一个简单的购物车功能?购物车是在线商店的一个重要功能,它允许用户将想要购买的商品添加到购物车中,并对商品进行管理。在Java中,我们可以通过使用面向对象的方式来实现一个简单的购物车功能。首先,我们需要定义一个商品类。该类包含商品的名称、价格和数量等属性,以及相应的Getter和Setter方法。例如:publicclassProduct

说起阿萨辛ASSASSIN,相信玩家们一定会想到《刺客信条》中的各位刺客大师,不仅身手了得,而且"躬身于黑暗、服务于光明"的信条,与国内知名机箱/电源/散热器品牌九州风神(DeepCool)旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近,该系列的最新产品阿萨辛ASSASSIN4S重磅上线,"西装刺客,再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计,外面包覆立方体造型的整流罩,整体感极强,并提供白、黑两种配色可选,满足不同色系

随着春天的到来,万物复苏,一切都充满了生机与活力。在这个美好的季节里,如何为家居生活增添一抹别样的色彩?哈趣H2投影仪,以其精致的设计和超高的性价比,成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上,还是卧室的床头柜旁,都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地,这种设计不仅让投影仪的外观更显高级,同时也增加了触感的舒适度。米色仿皮纹材质,更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配,既符合现代家居的审美趋势,又能够融入

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家,随着制程的提升和技术的进步,英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力,游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源,在满足高性能需求的ITX平台中,MX750P全模组电源的定额功率高达750W,同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念,共有黑白两款供玩家选择,均采用磨砂表面处理,搭配银灰色和红色的字体有很好的质感,

PHP商城开发技巧:设计购物车和订单同步功能在一个商城网站中,购物车和订单是不可或缺的功能。购物车用于用户选购商品并保存到临时购物车中,而订单则是用户确认购买商品后生成的记录。为了提升用户体验和减少错误,设计一个购物车和订单同步的功能非常重要。一、购物车和订单的概念购物车通常是一个临时的容器,用于保存用户选购的商品。用户可以将商品加入购物车,方便浏览和管理。

在当下科技飞速发展的时代,笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言,拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计,成为了未来的引领者,堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU,外观采用更时尚的宇宙飞船设计风格,同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

如何利用Redis和JavaScript实现购物车功能购物车是电商网站中非常常见的功能之一,它允许用户将感兴趣的商品添加到购物车中,方便用户随时查看和管理购买的商品。在本文中,我们将介绍如何利用Redis和JavaScript实现购物车功能,并提供具体的代码示例。一、准备工作在开始之前,我们需要确保已经安装并配置好Redis,可以通过官方网站[https:/
