关于JS控制CSS3动画(@keyframes)的一个小技巧

程序员文章站 2024-03-25 13:21:40
...

<!-- 购物车效果-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .goods{
      width:100%;
      height:100vh;
    }
    .goods>.goodsList{
      height:15vh;
      border-top:1px solid #ddd;
    }
    .goods>.goodsList>.goodsListButton{
      float: right;
      margin-top:2vh;
      margin-right:3vh;
    }
    .goods>.goodsList:last-child{
      border-bottom:1px solid #ddd;
    }
    .goods>.goodsList>div{  /*生成的div*/
      width:30px;
      height:30px;
      background:red;
      animation:mymove 1s;
      position:absolute;
    }
    /* @keyframes mymove {
        0% {top:0px;}
        10% {left:65.5%}
        100% {top:100%;left:65.5%;}
    } */
    footer{
      position:fixed;
      width:100%;
      display: flex;
      bottom:0;
      background:red;
      border-top:1px solid red;
      height:8vh;
    }
    footer>div{
      width:25vw;
      height:100%;
      line-height:8vh;
      font-size:13px;
      color:#fff;
      text-align: center;
    }
    footer>div:nth-child(3){
      background:#ddd;
    }
  </style>
</head>
<body>
    <div class="goods">
      <div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
      <div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
      <div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
      <div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
    </div>
    <footer>
       <div>1</div>
       <div>2</div>
       <div>购物车</div>
       <div>4</div>
    </footer>
</body>
    <script>

        //添加css规则
        function addCSSRule(sheet, selector, rules, index) {
            if("insertRule" in sheet) {
                sheet.insertRule(selector + "{" + rules + "}", index);
            }else if("addRule" in sheet) {
                sheet.addRule(selector, rules, index);
            }
        }
        //删除CSS规则
        function delCSSRule(sheet){
          sheet.deleteRule(0)
        }
        
        
        //预加载
        window.onload = function(){
          const goods = document.querySelector(".goods");
          goods.onclick = function(e){
              const target = e.target;
              if(target.tagName == "BUTTON"){
                const goodsListButton = document.querySelectorAll(".goodsListButton");
                const clientX = e.clientX; //当前X坐标
                const clientY = e.clientY; //当前Y坐标
                var div = document.createElement("div");target.after(div); //生成DIV节点
                var divNode = target.parentNode.getElementsByTagName("div")[0]; 
                divNode.style.top = (clientY - divNode.clientWidth / 2) + "px"; //X坐标赋值
                divNode.style.left = (clientX - divNode.clientHeight / 2) + "px"; //Y坐标赋值

                for(var i=0; i < goodsListButton.length; i++){
                  goodsListButton[i].disabled = true;  //禁止多次点击
                }
                  
                //动态添加规则  
                addCSSRule(document.styleSheets[0], "@keyframes mymove", `0% {top:${clientY}px;}20% {left:65.5%}100% {top:100%;left:65.5%;}`);
                //删除规则
                setTimeout(function(){
                     delCSSRule(document.styleSheets[0]);
                     divNode.parentNode.removeChild(divNode);
                     for(var i=0; i < goodsListButton.length; i++){
                        goodsListButton[i].disabled = false; 
                     }
                },1000)
              }
          }
        }
    </script>
</html>
上一篇：强大的js动画animejs使用
下一篇： Java算法（三）详细解析：快速排序