简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - div使用css3 transform做位移动画，js能实时获取div的位置吗？
大家讲道理
大家讲道理 2017-04-11 09:02:09
0
1
500

首先想知道，既然有css动画播放结束的事件（webkitTransitionEnd），那有没有动画播放中的事件？

第二想知道的是，用jq获取动画的transform值（$('p').css('transform')）得到的是这样的matrix(1, 0, 0, 1, -298.05, -60)但是原来的值应该是translate(-179.025px, 74.55px)这涉及两种表示方式互相转换的算法，这个算法是怎样的？

经测试，用$('p')[0].style.transform来获取p的实时位置是不符合需求的。它获取的并不是p实时的位置，而是css设置的位置

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

全員に返信(1)
刘奇
刘奇2017-04-11 09:04:09 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>
<p id=block></p>

<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
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！