h5添加购物车动画(贝塞尔曲线)

思路：获取动画移动到的终点位置，获取动画的起点位置，创建标签，删除标签，动画播放完成创建的dom

JS代码：

//返回元素的大小的及其相对于视口的位置 获取动画下落的终点位置
var carRect= document.querySelector('.footer-car').getBoundingClientRect();
this.jumpTarget={x:carRect.left+carRect.width/2,y:carRect.top+carRect.height/5
} //抛物线跳跃的元素jump(index){//获取动画下落的起点位置，因为起点是很多个商品所以要获取所点击的商品列表var btnAdd=document.querySelector('.goods-list').children[index].querySelector('.i-jiajianzujianjiahao')var rect=btnAdd.getBoundingClientRect();  var start={x:rect.left,y:rect.top}var div=document.createElement('div')div.className='add-to-car';var i=document.createElement('i')i.className='iconfont i-jiajianzujianjiahao' div.style.transform=`translateX(${start.x}px)`i.style.transform=`translateY(${start.y}px)`div.appendChild(i);document.body.appendChild(div);//强行渲染,任何一个布局属性都会导致它强行渲染,如果不加这个会导致只执行上方的transform动画，不执行下方的transform因为//transform不能同时执行div.clientWidth;//设置结束位置div.style.transform=`translateX(${this.jumpTarget.x}px)`i.style.transform=`translateY(${this.jumpTarget.y}px)`console.log(start,this.jumpTarget);//必须设置此事件仅触发一次，因为div的过渡事件触发div中的i元素也会触发过渡会事件冒泡到div触发第二次事件//避免冒泡二次触发将事件增加once属性每次执行动画仅触发一次过渡监听div.addEventListener('transitionend',()=>{console.log('动画触发了');div.remove();          this.carAnimate();  },{once:true})}

 CSS代码：

.add-to-car {position: fixed;color: #fff;font-size: 23rem;line-height: 40rem;text-align: center;z-index: 9;margin-left: -20rem;margin-top: -20rem;left: 0;top: 0;transition:  1s linear;
}.add-to-car .iconfont {width: 40rem;height: 40rem;background: #4a90e1;border-radius: 50%;display: block;transition:  1s cubic-bezier(0.5,-0.5,1,1);}

附代码欢迎下载：​​​​​​​https://download.csdn.net/download/qq_41429765/87700543

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！