纯js+css3实现购物车添加商品时，显示抛物线掉落的特效
此案例参照网上的jquery版本重写:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{
width: 100%;
height: 100%;
}
body{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.icon-add{
position: absolute;
right: 20px;
top: 100px;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
border:1px solid #ddd;
border-radius: 50%;
}
.icon2{
top: 200px;
}
.point-outer.point-pre {
display: none;
}
.point-outer {
position: absolute;
z-index: 20;
-webkit-transition: all 0.5s cubic-bezier(0.39,-0.4,0.83,0.23) 0s;
transition: all 0.5s cubic-bezier(.47,-0.3,.68,.43) 0s;
}
.point-inner {
width: 50px;
height: 50px;
line-height: 50px;
background-color: rgb(247,98,96);
-webkit-transition: all 0.5s linear 0s;
color: #ffffff;
text-align: center;
font-size: 0.7rem;
}
</style>
</head>
<body>
<span class="icon-add icon">+</span>
<script>
window.onload = function(){
//小球运动动画元素
let pointDiv = document.createElement('div');
pointDiv.id = 'pointDivs';
document.body.appendChild(pointDiv);
let pointOuter = document.createElement('div');
pointOuter.classList.add("point-outer","point-pre");
let pointInner = document.createElement('div');
pointInner.classList.add('point-inner');
pointOuter.appendChild(pointInner);
pointDiv.appendChild(pointOuter);
let icon_add = document.querySelector('.icon-add');
icon_add.addEventListener('click',function(e){
let rect = this.getBoundingClientRect();
let startOffset = {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
};
let endTop = window.innerHeight - 30,
endLeft = 20,
left = startOffset.left,
top = startOffset.top;
let outer = document.querySelectorAll('#pointDivs .point-pre')[0];
outer.classList.remove("point-pre");
outer.style.left = left+'px';
outer.style.top = top+'px';
let inner = outer.querySelectorAll(".point-inner");
setTimeout(function() {
outer.style.webkitTransform = 'translate3d(0,' + (endTop - top) + 'px,0)';
inner[0].style.webkitTransform = 'translate3d(' + (endLeft - left) + 'px,0,0)';
setTimeout(function() {
outer.removeAttribute("style");
outer.classList.add("point-pre");
inner[0].removeAttribute("style");
}, 500);
//这里的延迟值和小球的运动时间相关
}, 1);
//小球运动坐标
},false);
}
</script>
</body>
</html>