纯js实现购物车添加抛物线掉落特效

TzuHsing Su

2020-05-05

2568 次瀏覽

暫無評論

2832字数

web前端设计开发

**纯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>
```

最后修改：2020-05-05