关于JS控制CSS3动画（@keyframes）的⼀个⼩技巧
js控制css3动画触发<!-- 购物车效果-->
<!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>
</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)
}
//预加载
const goods = document.querySelector(".goods");
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 = ateElement("div");target.after(div); //⽣成DIV节点
var divNode = ElementsByTagName("div")[0];
p = (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]);
veChild(divNode);
for(var i=0; i < goodsListButton.length; i++){
goodsListButton[i].disabled = false;
}
},1000)
}
}
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。