（前端学习）07 使用vue框架制作购物车小球动画效果

最近在学习前端制作了一个购物车小球的动画效果
直接上图看看效果

下面介绍一下制作这个动画的详细过程：
1.因为使用vue所以需要使用transition标签包裹并指定动画三个动画生命周期函数

<transition @before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"><div class="ball" v-if="Ballflag" ref="ball"></div> //Ballflag默认指定为false不显示</transition>

样式设置成一个红色的小球采用absolute定位确保不影响页面的其他元素

.ball{width: 15px;height: 15px;border-radius: 50%;background-color: red;position: absolute;top: 413px;left: 80px;z-index: 99;
}

然后设置按钮 Ballflag = !Ballflag 取非触发动画效果（这里就不多说了）

如果起始位置和终点位置都使用px固定死的话对于不同的分辨率的设备效果都有所不同
所以为避免这一情况我采用了动态计算出起始位置和终点位置
下面是具体的动画的代码

//定义动画开始前回到原来的位置beforeEnter(el){el.style.transform = "translate(0,0)";},enter(el,done){el.offsetWidth;// 获取 小球 在页面中的位置var ballPosition = this.$refs.ball.getBoundingClientRect();// 获取 徽标 在页面中的位置（购物车上的红色标记）var badgePosition = document.getElementById("badge").getBoundingClientRect();var xDist = badgePosition.left - ballPosition.left;var yDist = badgePosition.top - ballPosition.top;el.style.transform = "translate("+xDist+"px, "+yDist+"px)";el.style.transition = "all 1s ease";done();},//动画结束后隐藏afterEnter(el){this.Ballflag = !this.Ballflag;},

通过动态的计算出起点位置和终点的位置来实现动画效果（优势可以适配不同分辨率的设备）
看到现在似乎整个动画效果已经完成了。

不过我在测试使用的时候发现一个问题

当我点击按钮触发动画的时候往下拉滚动条发现动画终点的位置并不是期望的那样到达购物车的位置
原因是我在给小球设置样式的时候给display设置的absolute绝对定位只会计算出一个页面中的绝对的位置，无法跟着滚动条来动。
后来又想到可以使用fixed布局相对这屏幕来运动不受页面滚动的影响
所以实现的代码如下
样式

.ball{width: 15px;height: 15px;border-radius: 50%;background-color: red;position: fixed;z-index: 99;top: 413px;left: 80px;}

****注意这里的boxPosition是页面中数量1的位置即定位小球的位置

beforeEnter(el){var boxPosition = this.$refs.boxPosition.getBoundingClientRect();// console.log(boxPosition)// 获取目标的起始位置 var dist = boxPosition.y -413;el.style.transform = "translate(0,"+dist+"px)";},enter(el,done){el.offsetWidth;var boxPosition = this.$refs.boxPosition.getBoundingClientRect();var badgePosition = document.getElementById("badge").getBoundingClientRect();//目标的起始位置var dist = boxPosition.y -413; // 这里因为是使用boxPosition的位置不是小球的位置所以-10调整一下误差var xDist = badgePosition.left - boxPosition.left -10; //这里要加上起始的定位var yDist = badgePosition.top - boxPosition.top + dist;el.style.transform = "translate("+xDist+"px, "+yDist+"px)";el.style.transition = "all 1s ease";done();},afterEnter(el){this.Ballflag = !this.Ballflag;},

这里就已经完成了小球的动画效果了
这样的动画不会因为页面的滚动而无法准确的定位而且还能适配不同分辨率的设备。

（前端学习）07 使用vue框架制作购物车小球动画效果相关推荐

前端学习笔记之-VUE框架学习-Vue核心
第一章:Vue核心 1.1.Vue简介官网介绍:https://cn.vuejs.org/v2/guide/ 1.2.初识Vue <!DOCTYPE html> <html lan ...
【前端】搭建一个VUE框架
大伙好,最近狠狠焦虑了,因为想搞前端技术岗找暑假实习担心自己能力不够,还是希望如果有同学大学期间就决定毕业找工作的话,一定要抓住机会大学期间狠狠锻炼本领噢,不要虚度光阴说了点题外话,回到正题,焦虑的 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
前端开发工程师（VUE框架）招聘
前端开发工程师(VUE框架) 岗位职责: 1.熟练运用HTML/JS/CSS等前端技术,精通JavaScript.Ajax.DOM.html.css等前端技术 2.熟练使用VUE前端框架,理解VUE框 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
ae怎么做圆一圈圈扩散效果_轻备学院AE特效基础教程 - 如何制作一个带有动画效果村庄烟雾...
熟练运用AE软件做几个偏技巧性并且可以举一反三的超简单小动画,教大家如何制作一个带有动画效果村庄烟雾,你学会了这些小动画,不仅可以熟练运用AE软件,还能对动画制作有深入的了解. 第一步:在AI中绘制插 ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
php多张图片制作成视频教程,ps把相片制作成视频动画效果
这篇教程是向的PHP中文网朋友介绍ps把相片制作成视频动画效果方法,教程制作出来的动画效果非常漂亮,而且难度不是很大,推荐到PHP中文网,喜欢的朋友可以跟着教程一起来学习如果想要把图片或者相片制作成 ...
Android把商品添加到购物车的动画效果（贝塞尔曲线）
当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点在起终点之间使用二次贝塞尔曲线填充起终点之间的点的 ...

（前端学习）07 使用vue框架制作购物车小球动画效果

（前端学习）07 使用vue框架制作购物车小球动画效果相关推荐

最新文章

热门文章