Question

translateX值的答案（感谢Albert Portnoy）：

var style = window.getComputedStyle(div);
var xVal = parseFloat(style.transform.split(" ")[4].replace(",", ''));

如何获取在JavaScript中使用@keyframes进行动画处理的元素的当前变换值？

动画或制作完成后，我使用的css值（translateX）似乎没有变化

<style>
    @keyframes anim {
        from {
            transform: translateX(0px)
        }

        to {
            transform: translateX(400px)
        }
    }

    div {
        width: 50px;
        height: 50px;
        background: black;
        animation: anim 5s forwards linear;
    }
</style>

<div></div>

<script>
    var div = document.getElementsByTagName('div')[0];

    function loop() {
        setTimeout(function () {
            console.log(div.style);
            loop()
        }, 100)
    }
    loop()

</script>

Answer 1

您可以使用（尚未标准的）功能CSSMatrix。
关于Calculating element vertex data from CSS transforms

的另一个有用的解释

这是一个正在运行的示例，请注意，我使用requestanimationFrame而不是使用setTimeout的回调循环在每一帧上运行代码。

var el = document.getElementById('root');
let count = 0;

function loop() {
  requestAnimationFrame(() => {
    var style = window.getComputedStyle(el);
    var matrix = new WebKitCSSMatrix(style.webkitTransform);
    console.log('translateX: ', matrix.m41);
    if(count > 100){
      // just to stop the infinite loop...
      return;
    }
    count++;
    loop();
  })
}
loop()

@keyframes anim {
  from {
    transform: translateX(0px)
  }
  to {
    transform: translateX(400px)
  }
}

#root {
  width: 50px;
  height: 50px;
  background: black;
  animation: anim 5s forwards linear;
}

<div id="root"/>

如何使用JavaScript获取@keyframes当前变换值？

1 个答案: