首頁猿問 div使用css3...

div使用css3 transform做位移動畫，js能實(shí)時獲取div的位置嗎？

JavaScript

牛魔王的故事 2018-09-11 13:23:05

首先想知道，既然有css動畫播放結(jié)束的事件（webkitTransitionEnd），那有沒有動畫播放中的事件？第二想知道的是，用jq獲取動畫的transform值（$('div').css('transform')）得到的是這樣的matrix(1, 0, 0, 1, -298.05, -60)但是原來的值應(yīng)該是translate(-179.025px, 74.55px)這涉及兩種表示方式互相轉(zhuǎn)換的算法，這個算法是怎樣的？經(jīng)測試，用$('div')[0].style.transform來獲取div的實(shí)時位置是不符合需求的。它獲取的并不是div實(shí)時的位置，而是css設(shè)置的位置

查看完整描述

1 回答

蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個贊

用window.getComputedStyle(elem).getPropertyValue("transform")可以得到實(shí)際的transform值

Demo如下：

<html>

<style>

#block {

position: absolute;

width: 100px;

height: 100px;

transition: all 5s ease;

background-color: blue;

}

.move {

transform: translate(200px, 400px);

}

</style>

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>

反對回復(fù) 2018-10-29

1 回答
0 關(guān)注
2682 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

div使用css3 transform做位移動畫，js能實(shí)時獲取div的位置嗎？

div使用css3 transform做位移動畫，js能實(shí)時獲取div的位置嗎？

1 回答

添加回答

div使用css3 transform做位移動畫，js能實(shí)時獲取div的位置嗎？

div使用css3 transform做位移動畫，js能實(shí)時獲取div的位置嗎？