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

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

有没有人有想法或提示？

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

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

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

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

before : -119.015625
after : -69.015625

before : -69.015625
after : -19.015625

before : -19.015625
after : 30.984375

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

CSS 在转换前得到 div 左位置

CSS get div left position before a transformation

javascript

css

css-transitions

getboundingclientrect