首先想知道，既然有css动画播放结束的事件（webkitTransitionEnd），那有没有动画播放中的事件？第二想知道的是，用jq获取动画的transform值（$('div').css('transform')）得到的是这样的matrix(1, 0, 0, 1, -298.05, -60)但是原来的值应该是translate(-179.025px, 74.55px)这涉及两种表示方式互相转换的算法，这个算法是怎样的？经测试，用$('div')[0].style.transform来获取div的实时位置是不符合需求的。它获取的并不是div实时的位置，而是css设置的位置
1 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
用window.getComputedStyle(elem).getPropertyValue("transform")可以得到实际的transform值
Demo如下：
<html>
<style>
#block {
position: absolute;
width: 100px;
height: 100px;
transition: all 5s ease;
background-color: blue;
}
.move {
transform: translate(200px, 400px);
}
</style>
<div id=block></div>
<script type="text/javascript">
var blk = document.getElementById("block"), tid;
blk.onclick = function() {
blk.classList.add("move")
tid = setInterval(function() {
console.log(window.getComputedStyle(blk).getPropertyValue("transform"))
}, 10)
setTimeout(function() {
clearInterval(tid)
}, 5000)
}
</script>
</html>
添加回答
举报
0/150
提交
取消