vue框架制作购物车小球动画效果实例代码
时间：2020-11-22 22:31:41|栏目：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固定死的话对于不同的分辨率的设备效果都有所不同所以为避免这一情况我采用了动态计算出 起始位置和终点位置下面是具体的动画的代码
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 413px;
left: 80px;
z-index: 99;
}
通过动态的计算出起点位置和终点的位置来实现动画效果（优势可以适配不同分辨率的设备）看到现在似乎整个动画效果已经完成了。
不过我在测试使用的时候发现一个问题
当我点击按钮触发动画的时候往下拉滚动条发现动画终点的位置并不是期望的那样到达购物车的位置原因是我在给小球设置样式的时候给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;
},
这里就已经完成了小球的动画效果了
这样的动画不会因为页面的滚动而无法准确的定位而且还能适配不同分辨率的设备。
总结
