javascript - 获取不包括 CSS 转换的 HTML 元素的边界框

Question

我意识到这曾经是 getBoundingClientRect() 的默认行为，但似乎我很少需要此功能!

我有一个 CSS 动画，它使用 translate 在 Y 轴上移动一个 div。但是，我想要 div 的结束位置......但在动画开始之前。

假设我不了解动画参数，是否有任何(巧妙的)方法可以做到这一点？

Answer 1

您可以按原样使用 getBoundingClientRect。
这是一个例子:

var element = document.getElementById("move");
window.setInterval(function() {
  var structure = element.getBoundingClientRect();
  element.innerHTML = "left: " + Math.floor(structure.left) + "px<br/> top: " + Math.floor(structure.top) + "px";
}, 100);

body {
  background-color: #222;
  height: 450px;
}
#move {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: white;
  animation: move 5s infinite alternate;
}
@keyframes move {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: calc(100% - 200px);
    top: calc(100% - 200px);
  }
}

<div id="move">HELLO!</div>