div使用css3 transform做位移动画，js能实时获取div的位置吗？
首先想知道，既然有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设置的位置
牛魔王的故事浏览 2662回答 1
1回答
-
蝴蝶不菲
用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>
随时随地看视频慕课网APP
相关分类
JavaScript