CSS在转换之前获取div的左侧位置

Question

给定：

const display = document.querySelector('.display');
const container = document.querySelector('.outer-div');

document.addEventListener("click", (event) => {
  if (!event.target.closest("button")) return;
  
  if(event.target.id === "button") {

    if(event.target.textContent === "left"){
        console.log("before : " + display.getBoundingClientRect().left);
        display.style.transform += "translateX(50px)";
        console.log("after : " + display.getBoundingClientRect().left);
    }
  }
    
});

.meta-div {
  box-shadow: 0 0 25px  rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden; /* allows the border-radius to be visible. */
  width: 14rem;
}
.outer-div {
  color: black;
  text-overflow: normal;
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
}

.display {
  float:right;
  transition: transform 250ms;
}

<div class="meta-div">
  <div class="outer-div">
    <div class="display">111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999</div>
  </div>
</div>
 <button id="button">left</button>

我的目标是在转换前后提取display div 相对于其容器的左侧位置：display.style.transform += "translateX(50px)";。

---

我知道函数 .getBoundingClientRect() 在执行 CSS 转换后返回元素的尺寸和位置作为浮点数，所以这里我应该使用一些其他函数来提取位置 before 转型。查看关于 SO 的其他 3 个问题，该解决方案似乎使用 offsetLeft，但在我的情况下，console.log(display.offsetLeft) 只是在每次连续的 left 按钮单击时返回 -127，而它应该增加 50 个像素。

我不知道如何在translateX() 转换之前提取div 的左侧位置。我在这方面花了很长时间。

有没有人有想法或提示？

Answer 1

因为您使用的是transition 动画，所以您需要监听transitionend 事件：

const display = document.querySelector('.display');
const container = document.querySelector('.outer-div');

document.addEventListener("click", (event) => {
  if (!event.target.closest("button")) return;
  
  if(event.target.id === "button") {

    if(event.target.textContent === "left"){
        console.log("before : " + display.getBoundingClientRect().left);
        display.style.transform += "translateX(50px)";
    }
  }
    
});

display.addEventListener('transitionend', e => {
  console.log("after : " + display.getBoundingClientRect().left);
});

.meta-div {
  box-shadow: 0 0 25px  rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden; /* allows the border-radius to be visible. */
  width: 14rem;
}
.outer-div {
  color: black;
  text-overflow: normal;
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
}

.display {
  float:right;
  transition: transform 250ms;
}

<div class="meta-div">
  <div class="outer-div">
    <div class="display">111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999</div>
  </div>
</div>
 <button id="button">left</button>

Answer 2

您的控制台日志显示相同结果的原因是您在transform 的250ms 属性上有一个transition。您的控制台日志几乎同时触发，因此属性永远没有时间在它们之间进行更改。

尝试从您的 css 中删除第 17 行：transition: transform 250ms;

您会注意到控制台日志显示了预期的输出。

before : -119.015625
after : -69.015625

before : -69.015625
after : -19.015625

before : -19.015625
after : 30.984375

如果您需要转换，并且转换始终为 50 像素，为什么不简单地硬编码值的差异？