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