猿问

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>&nbsp; &nbsp; #block {&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; transition: all 5s ease;&nbsp; &nbsp; &nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; }&nbsp; &nbsp; .move {&nbsp; &nbsp; &nbsp; &nbsp; transform: translate(200px, 400px);&nbsp; &nbsp; }</style><div id=block></div><script type="text/javascript">&nbsp; &nbsp; var blk = document.getElementById("block"), tid;&nbsp; &nbsp; blk.onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; blk.classList.add("move")&nbsp; &nbsp; &nbsp; &nbsp; tid = setInterval(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(window.getComputedStyle(blk).getPropertyValue("transform"))&nbsp; &nbsp; &nbsp; &nbsp; }, 10)&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(tid)&nbsp; &nbsp; &nbsp; &nbsp; }, 5000)&nbsp; &nbsp; }</script></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答