写的只是个demo而已,所以变量名怎么简单怎么来的
<style>
:root{
--bytheway:100px;
}
.tt{
}
.ak{
animation:ao 1s ease;
}
@keyframes ao{
from{transform: translateX(0%);}
to{transform: translateX(var(--bytheway));}
}
</style><body >
<div id="one" class="ab" style="position: absolute;top: 10%;border-radius: 50%;height: 20%;width: 10%;background: red;"></div>
</body><script type="text/javascript" src="../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
let root = document.documentElement;
let q=$("#one");
let a=10;
setInterval(()=>{
a+=10;
root.style.setProperty('--bytheway',a.toString()+"px");
q[0].className="ak";
console.log("2:"+q[0].className);
},1500);
q.bind("webkitAnimationEnd", function() { //监听事件
q[0].className="";
});
</script>
</script>注意：一定要把改变的操作写在监听动画是否完成的事件里，webkit是谷歌的内核其他浏览器可能稍稍不同（可能理解转成表达有些不正确，有错的话大家可以尽情指正）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
